/* ============================================================
   BTTR App — clon visual de Notion (modo oscuro)
   Paleta y proporciones calcadas del template de BTTR.
   ============================================================ */
:root {
    --bg: #191919;
    --bg-side: #202020;
    --bg-hover: rgba(255, 255, 255, .055);
    --bg-callout: rgba(255, 255, 255, .045);
    --bg-card: #252525;
    --bg-input: #2A2A2A;
    --border: rgba(255, 255, 255, .09);
    --border-soft: rgba(255, 255, 255, .055);
    --text: #D4D4D4;
    --text-strong: rgba(255, 255, 255, .92);
    --text-muted: #9B9B9B;
    --text-faint: #6E6E6E;
    --accent: #529CCA;
    /* chips: paleta EXACTA de Notion dark (verificada por deep research, votos 3-0) */
    --tag-gray-bg: #5A5A5A;   --tag-gray-fg: rgba(255,255,255,.88);
    --tag-brown-bg: #603B2C;  --tag-brown-fg: rgba(255,255,255,.88);
    --tag-orange-bg: #854C1D; --tag-orange-fg: rgba(255,255,255,.88);
    --tag-yellow-bg: #89632A; --tag-yellow-fg: rgba(255,255,255,.88);
    --tag-green-bg: #2B593F;  --tag-green-fg: rgba(255,255,255,.88);
    --tag-blue-bg: #28456C;   --tag-blue-fg: rgba(255,255,255,.88);
    --tag-purple-bg: #492F64; --tag-purple-fg: rgba(255,255,255,.88);
    --tag-pink-bg: #69314C;   --tag-pink-fg: rgba(255,255,255,.88);
    --tag-red-bg: #6E3630;    --tag-red-fg: rgba(255,255,255,.88);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --radius: 6px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
       -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
button { font-family: var(--font); }
a { color: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #383838; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
input, select, textarea {
    background: var(--bg-input); color: var(--text-strong); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 7px 10px; font-family: var(--font); font-size: 14px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(82,156,202,.25); }

/* ============ LOGIN ============ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.login-box { width: 360px; max-width: 100%; text-align: center; }
.login-logo { font-size: 42px; font-weight: 800; letter-spacing: .04em; color: #fff; }
.login-logo span { font-size: 16px; vertical-align: super; }
.login-sub { color: var(--text-muted); margin: 6px 0 28px; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }
.login-box input { padding: 11px 12px; font-size: 15px; }
.btn-primary { background: #fff; color: #191919; font-weight: 600; border: none; border-radius: var(--radius);
    padding: 11px; font-size: 14.5px; cursor: pointer; }
.btn-primary:hover { opacity: .9; }
.btn-primary:disabled { opacity: .5; cursor: default; }
.login-err { color: var(--tag-red-fg); font-size: 13px; min-height: 18px; }

/* ============ LAYOUT ============ */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 242px; flex: 0 0 242px; background: var(--bg-side); border-right: 1px solid var(--border-soft);
    padding: 10px 8px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.ws { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 12px; }
.ws-logo { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: .04em; }
.ws-logo span { font-size: 9px; vertical-align: super; }
.sb-close, .tb-menu { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 15px; border-radius: 4px; padding: 2px 7px; }
.sb-close:hover, .tb-menu:hover { background: var(--bg-hover); color: var(--text); }
.sb-nav { display: flex; flex-direction: column; gap: 1px; }
.sb-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 5px; cursor: pointer;
    color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; border: none; background: none; text-align: left; width: 100%; }
.sb-item:hover { background: var(--bg-hover); color: var(--text-strong); }
.sb-item.active { background: var(--bg-hover); color: var(--text-strong); }
.sb-ic { width: 18px; text-align: center; font-size: 14px; }
.sb-sec { font-size: 11.5px; font-weight: 600; color: var(--text-faint); padding: 14px 10px 4px; letter-spacing: .02em; }
.sb-add { color: var(--text-faint); font-size: 13.5px; }
.sb-badge { margin-left: auto; background: var(--tag-red-bg); color: var(--tag-red-fg); border-radius: 10px;
    font-size: 11px; font-weight: 700; padding: 0 7px; }
.sb-backdrop { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; position: sticky; top: 0;
    background: rgba(25,25,25,.85); backdrop-filter: blur(8px); z-index: 40; }
.tb-menu { display: none; font-size: 18px; }
.tb-crumbs { font-size: 13.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tb-bell { background: none; border: none; cursor: pointer; font-size: 16px; position: relative; border-radius: 5px; padding: 3px 6px; }
.tb-bell:hover { background: var(--bg-hover); }
.bell-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #EB5757; }
.tb-user { font-size: 13px; color: var(--text-muted); }
.notif-pop { position: fixed; top: 46px; right: 18px; width: 380px; max-width: calc(100vw - 24px); max-height: 60vh;
    overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,.5); z-index: 200; padding: 6px; }
.notif-item { padding: 9px 11px; border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item.no-leida { border-left: 2px solid var(--accent); background: rgba(82,156,202,.06); }
.notif-item small { color: var(--text-faint); display: block; margin-top: 2px; }
.notif-empty { padding: 20px; text-align: center; color: var(--text-faint); font-size: 13px; }

.content { flex: 1; padding: 18px clamp(20px, 6vw, 96px) 90px; max-width: 1200px; width: 100%; margin: 0 auto; }

/* ============ BLOQUES NOTION ============ */
.page-icon { font-size: 64px; line-height: 1; margin: 24px 0 8px; }
.page-title { font-size: 38px; font-weight: 700; color: var(--text-strong); letter-spacing: -.01em; margin-bottom: 4px; }
.page-title[contenteditable]:focus { outline: none; border-bottom: 1px solid var(--border); }
.page-sub { color: var(--text-muted); margin-bottom: 18px; }
/* propiedades tipo Notion (Client Contact / Email / Status…) */
.props { margin: 14px 0 8px; border-bottom: 1px solid var(--border-soft); padding-bottom: 14px; }
.prop-row { display: flex; align-items: center; min-height: 30px; font-size: 14px; }
.prop-k { flex: 0 0 160px; color: var(--text-faint); display: flex; gap: 8px; align-items: center; }
.prop-v { flex: 1; color: var(--text); min-width: 0; }
.prop-v input, .prop-v select { background: transparent; border: none; width: 100%; padding: 4px 6px; border-radius: 4px; }
.prop-v input:hover, .prop-v select:hover { background: var(--bg-hover); }
.prop-v input:focus, .prop-v select:focus { background: var(--bg-input); box-shadow: none; }
.prop-empty { color: var(--text-faint); }
/* headings con barra | */
.h-bar { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-strong);
    font-size: 15.5px; margin: 30px 0 10px; }
.h-bar::before { content: ""; width: 3px; height: 20px; background: #fff; border-radius: 2px; }
/* callout ⚡ */
.callout { display: flex; gap: 12px; background: var(--bg-callout); border-radius: 6px; padding: 14px 16px;
    color: var(--text); font-size: 14px; margin: 10px 0 18px; }
.callout .co-ic { flex: 0 0 auto; }
/* tarjetas grises (Team / Client info) */
.gcard { background: var(--bg-callout); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 14px 16px; margin-bottom: 10px; }
.gcard b { color: var(--text-strong); }
.gcard small { color: var(--text-muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 10px; } }

/* ============ TABLA (base de datos Notion) ============ */
.db-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 6px; }
.db-title { font-size: 20px; font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
.db-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.db-tools button, .ghost-btn { background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 13px; border-radius: 5px; padding: 4px 9px; }
.db-tools button:hover, .ghost-btn:hover { background: var(--bg-hover); color: var(--text-strong); }
.seg { display: inline-flex; gap: 2px; background: var(--bg-hover); border-radius: 6px; padding: 2px; }
.seg button { border: none; background: transparent; color: var(--text-muted); padding: 4px 12px; border-radius: 5px;
    cursor: pointer; font-size: 13px; }
.seg button.active { background: var(--bg-card); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0,0,0,.4); }

.ntable-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
.ntable { width: 100%; border-collapse: collapse; min-width: 760px; }
.ntable th { text-align: left; font-weight: 500; color: var(--text-faint); font-size: 13px; padding: 7px 10px;
    border-bottom: 1px solid var(--border); white-space: nowrap; }
.ntable th .th-ic { margin-right: 5px; opacity: .8; }
.ntable td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft);
    font-size: 14px; color: var(--text); vertical-align: middle; }
.ntable td:last-child { border-right: none; }
.ntable tr:hover td { background: rgba(255,255,255,.025); }
.row-name { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-strong); font-weight: 500; }
.row-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.row-name .doc-ic { opacity: .6; }
.new-row { color: var(--text-faint); cursor: pointer; padding: 8px 10px; font-size: 14px; border-bottom: 1px solid var(--border-soft); }
.new-row:hover { background: var(--bg-hover); color: var(--text); }

/* chips */
.tag { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12.5px; white-space: nowrap;
    line-height: 1.5; margin: 1px 3px 1px 0; }
.tag.gray { background: var(--tag-gray-bg); color: var(--tag-gray-fg); }
.tag.brown { background: var(--tag-brown-bg); color: var(--tag-brown-fg); }
.tag.orange { background: var(--tag-orange-bg); color: var(--tag-orange-fg); }
.tag.yellow { background: var(--tag-yellow-bg); color: var(--tag-yellow-fg); }
.tag.green { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.tag.blue { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.tag.purple { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }
.tag.pink { background: var(--tag-pink-bg); color: var(--tag-pink-fg); }
.tag.red { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* checkbox estilo Notion */
.ncheck { width: 16px; height: 16px; accent-color: #2383E2; cursor: pointer; }

/* ============ CALENDARIO ============ */
.cal-head { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--text-muted); font-size: 13.5px; }
.cal-head b { color: var(--text-strong); font-size: 15px; }
.cal-nav-btns { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--border-soft); border-top: 1px solid var(--border-soft); }
.cal-dow { padding: 6px; text-align: center; font-size: 12px; color: var(--text-faint);
    border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.cal-cell { min-height: 96px; padding: 4px 5px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
    font-size: 12px; color: var(--text-muted); cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.cal-cell:hover { background: rgba(255,255,255,.02); }
.cal-cell .dnum { text-align: right; font-size: 12px; }
.cal-cell.out .dnum { color: var(--text-faint); opacity: .5; }
.cal-cell.today .dnum { color: #fff; }
.cal-cell.today .dnum b { background: #EB5757; border-radius: 50%; padding: 2px 6px; font-weight: 600; }
.cal-ev { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 4px; padding: 2px 6px;
    font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; }
.cal-ev:hover { background: var(--bg-hover); }
.cal-ev .st { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }

/* ============ PEEK (ficha del post) ============ */
/* Side peek estilo Notion: la tabla queda VISIBLE e INTERACTIVA detrás (sin backdrop en desktop) */
.peek-backdrop { display: none !important; }
@media (max-width: 820px) { .peek-backdrop:not(.hidden) { display: block !important; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 300; } }
.peek { position: fixed; top: 0; right: 0; bottom: 0; width: 620px; max-width: 96vw; background: var(--bg);
    border-left: 1px solid var(--border); z-index: 301; overflow-y: auto; padding: 18px 34px 60px;
    box-shadow: -18px 0 50px rgba(0,0,0,.45); animation: peekIn .18s ease; }
@keyframes peekIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.peek-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--text-faint); }
.peek-top button { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 15px; padding: 3px 7px; border-radius: 5px; }
.peek-top button:hover { background: var(--bg-hover); color: var(--text); }
.peek-title { font-size: 30px; font-weight: 700; color: var(--text-strong); border: none; background: transparent;
    width: 100%; margin-bottom: 10px; padding: 2px 0; }
.peek-title:focus { box-shadow: none; border-bottom: 1px solid var(--border); border-radius: 0; }
/* flujo: barra de acciones según estado */
.flow-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bg-callout);
    border-radius: 8px; padding: 10px 12px; margin: 6px 0 16px; font-size: 13px; }
.flow-bar .fb-status { font-weight: 600; }
.fb-btn { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-strong); border-radius: 6px;
    padding: 5px 12px; cursor: pointer; font-size: 13px; }
.fb-btn:hover { background: var(--bg-hover); }
.fb-btn.ok { background: #2B593F; border-color: #2B593F; color: #C7EED2; }
.fb-btn.warn { background: #522E2A; border-color: #522E2A; color: #F4C7C0; }
/* tabla de campos (Copy / Hashtags / Canción...) como el template */
.ftable { width: 100%; border: 1px solid var(--border); border-radius: 4px; border-collapse: collapse; margin: 12px 0; }
.ftable td { border: 1px solid var(--border-soft); padding: 8px 10px; font-size: 13.5px; vertical-align: top; }
.ftable td:first-child { width: 130px; color: var(--text-muted); background: rgba(255,255,255,.02); }
.ftable textarea, .ftable input { width: 100%; background: transparent; border: none; padding: 0; resize: vertical; min-height: 20px; font-size: 13.5px; }
.ftable textarea:focus, .ftable input:focus { box-shadow: none; }
.peek h3.sec { font-size: 22px; font-weight: 700; color: var(--text-strong); margin: 26px 0 8px; }
.peek textarea.script { width: 100%; min-height: 110px; background: transparent; border: none; font-size: 14px; color: var(--text); }
.peek textarea.script:focus { box-shadow: none; }
.todo-item { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.todo-item input[type="text"] { background: transparent; border: none; flex: 1; padding: 2px; }
.todo-item input[type="text"]:focus { box-shadow: none; }
.todo-item.done input[type="text"] { text-decoration: line-through; color: var(--text-faint); }
/* comentarios */
.cmt { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.cmt-av { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--tag-blue-bg);
    color: var(--tag-blue-fg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.cmt-b { flex: 1; min-width: 0; }
.cmt-h { font-size: 12.5px; color: var(--text-muted); }
.cmt-h b { color: var(--text-strong); }
.cmt-t { font-size: 13.5px; margin-top: 2px; white-space: pre-wrap; }
.cmt.sys .cmt-t { color: var(--tag-red-fg); }
.cmt-form { display: flex; gap: 8px; margin-top: 10px; }
.cmt-form input { flex: 1; }
.link-arte { display: flex; align-items: center; gap: 8px; }
.link-arte a { color: var(--accent); font-size: 13.5px; word-break: break-all; }

/* ============ GENÉRICOS ============ */
.btn { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-strong); border-radius: 6px;
    padding: 7px 14px; cursor: pointer; font-size: 13.5px; }
.btn:hover { background: var(--bg-hover); }
.btn.solid { background: #fff; color: #191919; border-color: #fff; font-weight: 600; }
.btn.danger { color: var(--tag-red-fg); border-color: var(--tag-red-bg); }
.btn.mini { padding: 3px 10px; font-size: 12.5px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ccard { background: var(--bg-callout); border: 1px solid var(--border-soft); border-radius: 8px; padding: 16px;
    cursor: pointer; transition: background .12s; }
.ccard:hover { background: var(--bg-hover); }
.ccard .ci { font-size: 26px; }
.ccard b { display: block; color: var(--text-strong); margin-top: 8px; font-size: 15px; }
.ccard small { color: var(--text-muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.kpi { background: var(--bg-callout); border-radius: 8px; padding: 12px 14px; }
.kpi small { color: var(--text-muted); font-size: 12px; display: block; }
.kpi b { font-size: 22px; color: var(--text-strong); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }
.row-actions button { opacity: 0; }
tr:hover .row-actions button { opacity: 1; }

/* modal genérico */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; width: 460px; max-width: 100%;
    max-height: 90vh; overflow-y: auto; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.modal h3 { color: var(--text-strong); margin-bottom: 14px; font-size: 17px; }
.modal .fld { margin-bottom: 11px; }
.modal .fld label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.modal .fld input, .modal .fld select, .modal .fld textarea { width: 100%; }
/* textareas del modal: crecen hacia ABAJO, nunca scroll lateral */
.modal textarea { width: 100%; resize: vertical; min-height: 84px; overflow-x: hidden;
    white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* toasts */
.toasts { position: fixed; bottom: 18px; right: 18px; left: auto; transform: none; z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { background: #fff; color: #191919; border-radius: 8px; padding: 10px 18px; font-size: 13.5px; font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: tIn .18s ease; }
.toast.err { background: #E5484D; color: #fff; }
@keyframes tIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ v2: MENÚ NOTION / FILTROS / BOARD / STEPPERS ============ */
.nmenu { position: fixed; z-index: 600; width: 280px; background: #252525; border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.55); padding: 8px; animation: tIn .12s ease; }
.nm-q { width: 100%; margin-bottom: 6px; font-size: 13px; }
/* popup de color de lista (tablero) */
.nmenu.cpick { width: 230px; }
.cpick-tit { font-size: 12px; font-weight: 600; color: var(--text-faint); padding: 2px 4px 8px; }
.cpick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 4px 10px; }
.cpick-sw { width: 32px; height: 32px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; transition: transform .1s; }
.cpick-sw:hover { transform: scale(1.12); }
.cpick-sw.on { border-color: var(--text-strong); }
.cpick-custom { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text); padding: 6px 4px; border-radius: 5px; cursor: pointer; }
.cpick-custom:hover { background: var(--bg-hover); }
.cpick-custom input[type="color"] { width: 34px; height: 26px; border: 1px solid var(--border); border-radius: 5px; background: transparent; padding: 1px; cursor: pointer; }
.cpick-none { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text-faint); font-size: 13px; padding: 6px 4px; border-radius: 5px; cursor: pointer; }
.cpick-none:hover { background: var(--bg-hover); color: var(--text); }
.nm-list { max-height: 250px; overflow-y: auto; }
.nm-it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 13.5px; }
.nm-it:hover { background: var(--bg-hover); }
.nm-it.on { background: rgba(82,156,202,.08); }
.nm-ck { margin-left: auto; color: var(--accent); }
.nm-new { color: var(--text-muted); border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 8px; }
.nm-empty { padding: 10px; color: var(--text-faint); font-size: 13px; }

.prop-chip { background: transparent; border: none; cursor: pointer; padding: 3px 6px; border-radius: 5px; text-align: left; min-height: 26px; }
.prop-chip:hover { background: var(--bg-hover); }

.fbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px 0 10px; }
.fb-q { font-size: 13px; padding: 5px 10px; width: 180px; }
.fb-btn2 { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 20px;
    padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.fb-btn2:hover { color: var(--text-strong); background: var(--bg-hover); }
.fb-btn2.on { border-color: var(--accent); color: var(--accent); background: rgba(82,156,202,.08); }
.fb-clear { color: var(--tag-red-fg); border-color: var(--tag-red-bg); }

.board { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0 16px; align-items: flex-start; }
.bcol { flex: 0 0 240px; background: rgba(255,255,255,.02); border-radius: 8px; padding: 8px; }
.bcol-h { font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 2px 6px 8px; }
.bcard { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 7px; padding: 9px 11px;
    margin-bottom: 7px; cursor: pointer; font-size: 13px; }
.bcard:hover { background: var(--bg-hover); }
.bcard b { display: block; color: var(--text-strong); font-weight: 500; margin-bottom: 4px; }

.stepper { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 6px; padding: 1px 4px; }
.stepper button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 0 5px; }
.stepper button:hover { color: #fff; }
.stepper b { min-width: 18px; text-align: center; }

.row-name .open-btn { opacity: 0; margin-left: 8px; background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-muted); border-radius: 5px; font-size: 10px; padding: 2px 7px; cursor: pointer; letter-spacing: .04em; }
tr:hover .row-name .open-btn { opacity: 1; }

.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 8px 0; }
.perm-grid label { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; padding: 3px 0; }
.tagrow { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border-soft); }
.tagrow input[type="text"] { flex: 1; font-size: 13px; padding: 5px 9px; }
.color-dot { width: 16px; height: 16px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border); }

/* ============ MÓVIL ============ */
@media (max-width: 820px) {
    .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 250; transform: translateX(-110%); transition: transform .18s ease; width: 270px; }
    body.sb-open .sidebar { transform: none; }
    body.sb-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 240; }
    .tb-menu { display: block; font-size: 24px; padding: 4px 12px; }
    #equipo-zone .mem-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
    #equipo-zone .mem-actions .btn.mini { flex: 1 1 auto; min-width: 90px; text-align: center; padding: 10px; }
    .content { padding: 12px 16px 80px; }
    /* chat IA: llenar la pantalla y que el input llegue al fondo */
    .content:has(.ai-chat) { padding-bottom: 10px; }
    .ai-chat { height: calc(100dvh - 84px); }
    .page-title { font-size: 28px; }
    .peek { width: 100vw; max-width: 100vw; padding: 14px 16px 60px; }
    .prop-k { flex-basis: 120px; }
    input, select, textarea { font-size: 16px !important; }  /* sin zoom iOS */
    .ntable { min-width: 640px; }
    .cal-cell { min-height: 64px; }
    .cal-ev { font-size: 10px; }
}

/* celdas editables inline */
td.cell-e { cursor: pointer; }
td.cell-e:hover { background: rgba(255,255,255,.045) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.cell-date { position: fixed; z-index: 650; background: #252525; border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; color: var(--text-strong); }

/* Navegación: botones de acceso directo (estilo enlaces Notion) */
.nav-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.nav-quick button {
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
    border-radius: 7px; padding: 7px 14px; cursor: pointer; font-size: 13px; font-family: var(--font);
    transition: background .12s;
}
.nav-quick button:hover { background: var(--bg-hover); color: var(--text-strong); }

/* ===== Layout cliente estilo Notion: Navegación + Board arriba ===== */
/* Navegación ARRIBA (barra horizontal) y Project Tasks a todo el ancho debajo */
.cli-top { display: block; margin: 8px 0 4px; }
.cli-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 16px; }
.cli-nav .h-bar { flex-basis: 100%; margin-bottom: 2px; }
.cli-nav .navlink { border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px 12px; }
.navlink { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 5px; cursor: pointer;
    color: var(--text); font-size: 14px; text-decoration: underline; text-decoration-color: transparent; }
.navlink:hover { background: var(--bg-hover); color: var(--text-strong); text-decoration-color: var(--text-faint); }
.cli-board { min-width: 0; }
@media (max-width: 860px) { .cli-top { grid-template-columns: 1fr; gap: 12px; } }

/* ABRIR pegado a la derecha de la celda Name */
.row-name { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-strong); font-weight: 500; width: 100%; }
.row-name .rn-txt { flex: 1; min-width: 0; }
.row-name:hover .rn-txt { text-decoration: underline; text-underline-offset: 3px; }
.row-name .open-btn { opacity: 0; margin-left: auto; flex: 0 0 auto; }
tr:hover .row-name .open-btn { opacity: 1; }

/* Drag & drop — Board */
.bcard[draggable="true"] { cursor: grab; }
.bcard.dragging { opacity: .45; }
.bcol.drop-on { background: rgba(82,156,202,.10); box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: 8px; }

/* Drag & drop — Calendario */
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev.dragging { opacity: .45; }
.cal-cell.drop-on { background: rgba(82,156,202,.10); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Propiedad de cliente editable */
.cprop { cursor: pointer; border-radius: 4px; padding: 2px 5px; margin: -2px -5px; display: inline-block; }
.cprop:hover { background: var(--bg-hover); }
.ghost-btn.mini { font-size: 11px; padding: 2px 7px; }

/* Textareas que crecen con el texto (no scroll) */
textarea.grow { overflow: hidden; resize: none; width: 100%; background: transparent; border: none;
    color: var(--text-strong); font-family: var(--font); font-size: 14px; line-height: 1.55; margin-top: 6px; padding: 0; min-height: 24px; }
textarea.grow:focus { outline: none; }
.brief-card { padding: 16px 18px; margin-bottom: 12px; }
.peek textarea.script { overflow: hidden; resize: none; }

/* Campana de notificaciones más visible */
.tb-bell { color: var(--text-muted); }
.tb-bell:hover { color: var(--text-strong); }
.tb-bell svg { stroke: currentColor; }
/* Emoji + título editables */
.editable-icon { cursor: pointer; border-radius: 8px; padding: 2px; }
.editable-icon:hover { background: var(--bg-hover); }
.page-title[contenteditable] { cursor: text; border-radius: 6px; padding: 0 4px; margin-left: -4px; }
.page-title[contenteditable]:hover { background: var(--bg-hover); }
.page-title[contenteditable]:focus { outline: none; background: var(--bg-input); }



/* ftable del peek: textareas crecen (sin scroll) */
.ftable textarea.grow { min-height: 20px; }
.ftable td { vertical-align: top; }

/* Banner de impersonación */
#imp-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 700; background: #B45309; color: #fff;
    text-align: center; font-size: 13px; padding: 7px 14px; }
#imp-bar button { background: #fff; color: #7a3a06; border: none; border-radius: 5px; padding: 3px 10px; font-weight: 600; cursor: pointer; margin-left: 6px; }
body.has-imp { padding-top: 34px; }
body.has-imp .sidebar { top: 34px; height: calc(100vh - 34px); }

/* ===== Asistente de contenido IA — estilo chat (Gemini/Claude) ===== */
.ai-chat { display: flex; flex-direction: column; height: calc(100vh - 120px); width: 100%; max-width: 820px; margin: 0 auto; }
.ai-top { display: flex; align-items: center; gap: 8px; padding: 2px 2px 12px; flex-wrap: wrap; }
.ai-top select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; flex: 1 1 130px; min-width: 0; }
.ai-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 10px 2px 18px; }
.ai-hello { margin: auto; text-align: center; max-width: 560px; padding: 20px; }
.ai-hello .ai-spark { font-size: 30px; color: var(--accent); margin-bottom: 10px; }
.ai-hello h2 { font-size: 30px; font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; margin-bottom: 10px; }
.ai-hello p { margin-bottom: 18px; }
.ai-sugs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ai-sug { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: 18px;
    padding: 8px 14px; font-size: 13px; cursor: pointer; }
.ai-sug:hover { background: var(--bg-hover); color: var(--text-strong); border-color: var(--accent); }
.ai-msg { max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.ai-user { align-self: flex-end; background: var(--bg-card); color: var(--text-strong); border-bottom-right-radius: 5px; }
.ai-bot { align-self: flex-start; background: transparent; color: var(--text); padding-left: 4px; border-radius: 0; max-width: 100%; }
.ai-loading { padding: 8px 4px; }
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); display: inline-block; animation: aiblink 1.2s infinite both; }
.ai-typing i:nth-child(2) { animation-delay: .2s; } .ai-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes aiblink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }
.ai-idea { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 14px 16px; margin-bottom: 10px; }
.ai-idea .ai-i-title { font-weight: 600; color: var(--text-strong); font-size: 15px; }
.ai-idea .ai-i-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.ai-idea .ai-i-copy { font-size: 13px; color: var(--text); margin: 6px 0; }
.ai-idea .ai-i-hash { font-size: 12.5px; color: var(--accent); }
.ai-form { display: flex; gap: 8px; align-items: center; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 26px; padding: 6px 6px 6px 18px; box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.ai-form input { flex: 1; background: transparent; border: none; color: var(--text-strong); font-size: 15px; padding: 8px 0; }
.ai-form input:focus { outline: none; box-shadow: none; }
.ai-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.ai-send:hover { opacity: .9; }

/* acciones de tarjeta de idea IA */
.ai-i-acts { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.ai-idea.added { border-color: var(--tag-green-bg); } .ai-idea.dropped { opacity: .55; }
.ai-ok { color: #6bbf8a; font-size: 13px; font-weight: 600; } .ai-drop { color: var(--text-faint); font-size: 13px; }
.btn.solid { background: var(--accent); color: #fff; border: none; }

/* peek: X más grande, eliminar abajo (zona peligro) */
#peek-close { font-size: 22px; line-height: 1; padding: 2px 8px; }
.peek-danger { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.btn-del { background: none; border: 1px solid var(--border); color: #d98a8a; border-radius: 6px;
    padding: 7px 12px; font-size: 13px; cursor: pointer; }
.btn-del:hover { background: rgba(217,138,138,.12); border-color: #d98a8a; color: #e5a0a0; }

/* acciones de miembro (Equipo) — en escritorio a la derecha, en móvil envuelven */
.mem-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* markdown ligero en respuestas de la IA */
.ai-bot .md-h { font-weight: 700; color: var(--text-strong); margin: 10px 0 4px; font-size: 14.5px; }
.ai-bot .md-li { margin: 3px 0 3px 4px; }
.ai-bot b { color: var(--text-strong); }

/* ===== Mi tablero (kanban personal) ===== */
.tab-board { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 2px 14px; align-items: stretch; }
.tab-col { flex: 1 1 280px; min-width: 260px; max-width: 460px; background: var(--bg-side); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; min-height: 320px; }
.tab-col-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; cursor: grab; }
.tab-col-grip { color: var(--text-faint); font-size: 13px; padding: 2px 2px 2px 4px; cursor: grab; opacity: 0; transition: opacity .12s; user-select: none; }
.tab-col:hover .tab-col-grip { opacity: .8; }
.tab-col.col-dragging { opacity: .45; outline: 1px dashed var(--accent); }
.tab-col-title { flex: 1; min-width: 0; background: transparent; border: none; font-weight: 700; color: var(--text-strong); font-size: 14px; padding: 4px 6px; border-radius: 5px; }
.tab-col-title:hover, .tab-col-title:focus { background: var(--bg-hover); }
.tab-col-menu { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 18px; padding: 2px 8px; border-radius: 5px; }
.tab-col-menu:hover { background: var(--bg-hover); color: var(--text); }
.tab-tasks { display: flex; flex-direction: column; gap: 7px; flex: 1; min-height: 140px; border-radius: 8px; padding: 4px; }
.tab-card { cursor: pointer; }
.tab-tasks.drop-on { background: rgba(82,156,202,.12); outline: 1px dashed var(--accent); }
.tab-card { display: flex; align-items: flex-start; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; cursor: grab; }
.tab-card.dragging { opacity: .4; }
/* chips de enlaces en tarjetas y tablas */
.tab-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tab-link-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--accent); background: rgba(82,156,202,.10); border: 1px solid rgba(82,156,202,.28); border-radius: 5px; padding: 2px 7px; text-decoration: none; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-link-chip:hover { background: rgba(82,156,202,.20); }
.tab-card-nota a, .ntable a { color: var(--accent); word-break: break-all; }
.tab-card-nota { overflow-wrap: anywhere; }
.tab-card.done .tab-card-txt { text-decoration: line-through; color: var(--text-faint); }
.tab-chk { margin-top: 2px; accent-color: var(--accent); width: 15px; height: 15px; flex: 0 0 auto; }
.tab-card-txt { flex: 1; font-size: 13.5px; color: var(--text); cursor: pointer; word-break: break-word; }
.tab-newtask { width: 100%; background: transparent; border: none; margin-top: 8px; padding: 7px 6px; font-size: 13px; color: var(--text); border-radius: 6px; }
.tab-newtask:hover, .tab-newtask:focus { background: var(--bg-hover); }
.tab-addcol { flex: 0 0 240px; }
.tab-addcol input { width: 100%; background: var(--bg-hover); border: 1px dashed var(--border); border-radius: 10px; padding: 12px; color: var(--text-muted); font-size: 13px; }
.arch-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }

/* ===== Mi tablero: pestañas, badges, calendario, eventos ===== */
.tab-switch { display: inline-flex; background: var(--bg-side); border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px; gap: 3px; margin-bottom: 14px; }
.tab-switch button { background: none; border: none; color: var(--text-muted); padding: 7px 16px; border-radius: 7px; font-weight: 600; font-size: 13px; cursor: pointer; }
.tab-switch button.on { background: var(--bg-card); color: var(--text-strong); }
.tab-card-body { flex: 1; min-width: 0; }
.tab-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; align-items: center; }
.tab-fecha { font-size: 11px; color: var(--accent); }
.tab-asig { font-size: 11px; color: var(--text-faint); }
/* calendario del tablero */
.ncal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; }
.ncal-h { background: var(--bg-side); color: var(--text-faint); font-size: 11px; padding: 6px 8px; text-align: right; }
.ncal-cell { background: var(--bg); min-height: 76px; padding: 5px 6px; overflow: hidden; min-width: 0; }
.ncal-cell.empty { background: var(--bg-side); }
.ncal-cell.hoy { background: rgba(82,156,202,.07); }
.ncal-d { font-size: 11px; color: var(--text-faint); text-align: right; margin-bottom: 3px; }
.ncal-item { font-size: 11px; padding: 3px 6px; border-radius: 5px; margin-bottom: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; }
.ncal-item.task { background: var(--bg-card); color: var(--text); }
.ncal-item[data-readonly] { cursor: default; opacity: .92; }
.ev-blue { background: var(--tag-blue-bg); color: #fff; } .ev-green { background: var(--tag-green-bg); color: #fff; }
.ev-yellow { background: var(--tag-yellow-bg); color: #fff; } .ev-red { background: var(--tag-red-bg); color: #fff; }
.ev-purple { background: var(--tag-purple-bg); color: #fff; } .ev-orange { background: var(--tag-orange-bg); color: #fff; }
.ev-vers { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.ev-chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); font-weight: 400; margin: 0; }
.ev-chk input { width: auto; }
@media (max-width: 820px) { .ncal-cell { min-height: 58px; } .ncal-item { font-size: 10px; } }

/* semáforo de atascados */
.sem { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; margin-left: 6px; white-space: nowrap; }
.sem-yel { background: var(--tag-yellow-bg); color: #fff; }
.sem-red { background: var(--tag-red-bg); color: #fff; }

/* tarea nueva: textarea que crece hacia abajo (no scroll horizontal) */
textarea.tab-newtask { resize: none; overflow: hidden; line-height: 1.4; min-height: 20px; font-family: var(--font); }
/* reglamento de la agencia */
.regl-box { white-space: pre-wrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; color: var(--text); }

/* monto extra en tarjeta de tarea */
.tab-monto { font-size: 11px; font-weight: 700; color: #6bbf8a; background: rgba(107,191,138,.12); padding: 1px 7px; border-radius: 10px; }

/* peek de tarea personal */
.pkt-hecha-l { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pkt-hecha-l input { width: 16px; height: 16px; accent-color: var(--accent); }
textarea.peek-title { resize: none; overflow: hidden; width: 100%; }

/* tarjeta de tarea: más legible + descripción */
.tab-card-txt { font-weight: 600; color: var(--text-strong); font-size: 13.5px; line-height: 1.4; }
.tab-card-nota { font-size: 12px; color: var(--text-muted); line-height: 1.45; margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* peek de tarea estilo To-Do */
.pkt-star { background: none; border: none; color: var(--text-faint); font-size: 20px; cursor: pointer; }
.pkt-star.on { color: #E9C46A; }
.pkt-steps { margin: 4px 0 14px; display: flex; flex-direction: column; gap: 2px; }
.pkt-step { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.pkt-step input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.pkt-step span { flex: 1; } .pkt-step span.done { text-decoration: line-through; color: var(--text-faint); }
.pkt-step-x { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; opacity: 0; }
.pkt-step:hover .pkt-step-x { opacity: 1; }
.pkt-step.add .pkt-plus { color: var(--accent); font-size: 15px; }
.pkt-step.add input { flex: 1; background: transparent; border: none; color: var(--text); font-size: 13.5px; }
.pkt-link-open { display: inline-block; margin-top: 8px; color: var(--accent); font-size: 13px; }
.tab-star { color: #E9C46A; }
.tab-steps-i { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* variaciones / propuestas de arte */
.pk-var { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; font-size: 13.5px; }
.pk-var.elegida { border-color: var(--tag-green-bg); background: rgba(43,89,63,.12); }
.pk-var a { color: var(--accent); }
.pk-var [data-varx] { margin-left: auto; color: #d98a8a; }

/* enlaces múltiples en tarea + persona plana */
.pkt-link-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border-soft); border-radius: 7px; margin-bottom: 5px; font-size: 13px; }
.pkt-link-row a { color: var(--accent); flex: 1; word-break: break-all; }
.pkt-link-x { background: none; border: none; color: #d98a8a; cursor: pointer; font-size: 12px; }
.prop-chip.pkt-person { color: var(--text-strong); }

/* panel de seguimiento (lo que asigné) */
.asig-done td { opacity: .55; }

/* callout contraíble (cerrado por defecto) */
.callout-d { background: var(--bg-callout); border: 1px solid var(--border-soft); border-radius: 8px; margin: 14px 0; padding: 0; }
.callout-d summary { cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--text-muted); list-style: none; user-select: none; }
.callout-d summary::-webkit-details-marker { display: none; }
.callout-d[open] summary { border-bottom: 1px solid var(--border-soft); }
.callout-body { padding: 10px 14px; font-size: 13.5px; color: var(--text); line-height: 1.55; }

/* pills de parámetros del chat IA (encima del input) */
.ai-params { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 2px; }
.ai-pill { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: 18px; padding: 7px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ai-pill:hover { background: var(--bg-hover); border-color: var(--accent); }
.ai-pill.ghost { background: none; border: none; color: var(--text-muted); }

.sb-dragging { opacity: .4; }

/* selector de emojis */
.emoji-modal { width: 380px; max-width: 94vw; padding: 14px; }
.emoji-head { display: flex; gap: 8px; margin-bottom: 10px; }
.emoji-head input { flex: 1; }
.emoji-body { max-height: 340px; overflow-y: auto; }
.emoji-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin: 10px 2px 4px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-cell { background: none; border: none; cursor: pointer; font-size: 22px; padding: 6px 0; border-radius: 8px; line-height: 1; }
.emoji-cell:hover { background: var(--bg-hover); }

.asig-empty { padding: 16px; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }

/* contador de posts por cliente en el sidebar */
.sb-item .sb-cname { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sb-count { background: var(--bg-hover); color: var(--text-muted); font-size: 11px; font-weight: 600; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 9px; margin-left: auto; }

/* flecha OBVIA en las pills del chat IA (se lee como selector) */
.ai-pill:not(.ghost) { padding-right: 8px; display: inline-flex; align-items: center; }
.ai-pill:not(.ghost)::after { content: "▾"; display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; width: 20px; height: 20px; border-radius: 6px; background: var(--bg-hover); color: var(--text-muted); font-size: 11px; line-height: 1; }

/* acciones rápidas en cada idea IA */
.ai-i-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.chip-q { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); border-radius: 14px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.chip-q:hover { border-color: var(--accent); color: var(--text); }

/* editor de texto enriquecido del guion (negrita/cursiva/resaltado) */
.rt-bar { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.rt-bar button { width: 30px; height: 28px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.rt-bar button:hover { border-color: var(--accent); }
.rt-bar .rt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.rt-bar .rt-hl { border: 1px solid rgba(0,0,0,.25); }
.rt-bar .rt-hl-off { color: var(--text-muted); }
.rt-edit { min-height: 90px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; line-height: 1.6; overflow-y: auto; outline: none; white-space: pre-wrap; }
.rt-edit:focus { border-color: var(--accent); }
.rt-edit:empty:before { content: attr(data-ph); color: var(--text-faint); }
.rt-view { padding: 4px 0; line-height: 1.6; white-space: pre-wrap; }
.rt-edit mark, .rt-view mark { padding: 0 2px; border-radius: 3px; }

.btn.mini.danger { color: #d98a8a; }
.btn.mini.danger:hover { border-color: #d98a8a; }

/* colapsar sidebar en desktop (« oculta, ☰ reabre) */
body.sb-collapsed .sidebar { display: none; }
body.sb-collapsed .tb-menu { display: inline-flex !important; }

/* etiqueta de estado clickeable en el peek (admin cambia estado a gusto) */
.fb-status.fb-status-btn { background: none; border: none; cursor: pointer; padding: 2px; border-radius: 6px; display: inline-flex; align-items: center; gap: 2px; }
.fb-status.fb-status-btn:hover { background: var(--bg-hover); }
.fb-caret { color: var(--text-muted); font-size: 10px; }

/* asignar to-do del post a un miembro */
.todo-item { display: flex; align-items: center; gap: 8px; }
.todo-item [data-tdt] { flex: 1; }
.td-asig { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); border-radius: 12px; padding: 3px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.td-asig:hover { border-color: var(--accent); color: var(--text); }
.td-asig.ro { cursor: default; }

/* carpetas múltiples del cliente */
.cl-carpetas { margin: 4px 0 18px; }
.carp-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 6px; font-size: 14px; }
.carp-ic { opacity: .8; }
.carp-link { flex: 1; color: var(--accent); font-weight: 500; }
.carp-edit, .carp-del { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 2px 6px; border-radius: 5px; }
.carp-edit:hover { background: var(--bg-hover); color: var(--text); }
.carp-del:hover { background: var(--bg-hover); color: #d98a8a; }

/* badge de diseñador por defecto en el equipo */
.team-badge { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--tag-purple-fg); background: var(--tag-purple-bg); padding: 1px 8px; border-radius: 10px; }
.team-def { margin-top: 4px; font-size: 11px; background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 2px 8px; border-radius: 10px; cursor: pointer; }
.team-def:hover { border-color: var(--accent); color: var(--text); }

/* bloquear scroll del fondo con el peek abierto */
body.peek-open { overflow: hidden; }
/* perfil: dos cards lado a lado */
.perfil-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.perfil-2col .gcard { max-width: none; }
@media (max-width: 760px) { .perfil-2col { grid-template-columns: 1fr; } }
/* notificaciones: encabezado + limpiar + X por ítem */
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; position: sticky; top: 0; background: var(--bg-card); border-bottom: 1px solid var(--border-soft); }
.notif-head > div { display: flex; gap: 6px; align-items: center; }
.notif-clear { background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; padding: 3px 9px; border-radius: 8px; cursor: pointer; }
.notif-clear:hover { border-color: var(--accent); color: var(--text); }
.notif-x { background: none; border: none; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.notif-x:hover { background: var(--bg-hover); color: var(--text); }
.notif-item { display: flex; align-items: flex-start; gap: 8px; }
.notif-txt { flex: 1; }
.notif-del { background: none; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer; padding: 2px 5px; border-radius: 5px; }
.notif-del:hover { background: var(--bg-hover); color: #d98a8a; }

/* ===== Estadísticas: gráficas + Gantt ===== */
.st-kpis { margin: 6px 0 4px; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-bottom: 6px; }
@media (max-width: 820px) { .st-grid { grid-template-columns: 1fr; } }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 6px 0; }
.donut-leg { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.lg-row { display: flex; align-items: center; gap: 7px; }
.lg-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.barsh { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.barh-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.barh-lbl { flex: 0 0 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.barh-track { flex: 1; height: 12px; background: var(--bg-hover); border-radius: 6px; overflow: hidden; }
.barh-fill { display: block; height: 100%; border-radius: 6px; transition: width .5s; }
.barh-val { flex: 0 0 30px; text-align: right; }
.gantt-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 10px; margin-bottom: 10px; }
.gantt { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.gantt th, .gantt td { border: 1px solid var(--border-soft); text-align: center; padding: 4px 0; min-width: 26px; color: var(--text-faint); }
.gantt th.g-cli, .gantt td.g-cli { text-align: left; padding: 6px 10px; position: sticky; left: 0; background: var(--bg-side); min-width: 150px; color: var(--text); white-space: nowrap; z-index: 1; }
.gantt th { font-weight: 600; }
.gantt .g-hoy { background: rgba(82,156,202,.14); color: var(--accent); }
.g-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 1px; }

/* ===== Animaciones suaves ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes peekIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.peek:not(.hidden) { animation: peekIn .22s cubic-bezier(.22,.61,.36,1); }
.modal-bg { animation: fadeIn .16s ease; }
.modal { animation: popIn .18s cubic-bezier(.22,.61,.36,1); }
.nmenu { animation: popIn .13s ease; }
.notif-pop:not(.hidden) { animation: fadeUp .16s ease; }
.ai-idea { animation: fadeUp .28s ease both; }
.bcard, .tab-card, .gcard { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.bcard:hover, .tab-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.content > * { animation: fadeIn .2s ease; }
.btn, .fb-btn, .chip-q, .ai-pill, .navlink, .sb-item { transition: background .13s ease, border-color .13s ease, color .13s ease, transform .1s ease; }
.btn:active, .fb-btn:active { transform: scale(.97); }
.tag { transition: filter .12s ease; }
.barh-fill, .g-dot { transition: width .5s ease; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* filtro por grupo en el tablero personal */
.grupo-filtro { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.gf-sep { width: 1px; height: 18px; background: var(--border-soft); margin: 0 7px; display: inline-block; }
/* filtros compactos (dropdown estilo Notion) */
.filt-btn { background: none; border: 1px dashed var(--border); color: var(--text-muted); font-size: 12.5px; padding: 4px 11px; border-radius: 14px; cursor: pointer; }
.filt-btn:hover { background: var(--bg-hover); color: var(--text); }
.filt-btn.on { border-style: solid; border-color: var(--accent); color: var(--accent); background: rgba(82,156,202,.10); font-weight: 600; }
.filt-caret { font-size: 9px; opacity: .7; }
.gf-chip { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); border-radius: 14px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.gf-chip:hover { border-color: var(--accent); color: var(--text); }
.gf-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ===== Ranking del equipo (incentivos) ===== */
.rank-list { display: flex; flex-direction: column; gap: 6px; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-card); }
.rank-row.rank-top { border-color: var(--tag-yellow-bg); background: linear-gradient(90deg, rgba(137,99,42,.14), transparent); }
.rank-pos { font-size: 18px; width: 28px; text-align: center; flex: 0 0 28px; }
.rank-name { flex: 1; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rank-crown { font-size: 11px; font-weight: 600; background: var(--tag-yellow-bg); color: var(--tag-yellow-fg); padding: 1px 8px; border-radius: 10px; }
.rank-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rank-badge { font-size: 10.5px; background: var(--tag-green-bg); color: var(--tag-green-fg); padding: 1px 7px; border-radius: 9px; font-weight: 500; }
.rank-stats { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 640px) { .rank-row { flex-wrap: wrap; } .rank-stats { flex-basis: 100%; padding-left: 40px; } }

/* Mi día / Mi semana */
.sem-bloque { margin-bottom: 12px; }
.sem-h { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.sem-bloque.venc .sem-h { color: #E08F8F; }
.sem-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 5px; font-size: 13.5px; cursor: pointer; }
.sem-item:hover { background: var(--bg-hover); }
.sem-bloque.venc .sem-item { border-color: rgba(224,143,143,.4); }

/* ===== Vista pública solo-lectura del cliente (/ver/:token) ===== */
body.publica { background: #191919; }
.pub-wrap { max-width: 1000px; margin: 0 auto; padding: 30px 18px 60px; }
.pub-head { text-align: center; margin-bottom: 22px; }
.pub-title { font-size: 30px; font-weight: 700; color: var(--text-strong); }
.pub-sub { color: var(--text-muted); margin: 2px 0 12px; }
.pub-nav { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; color: var(--text); }
.pub-nav button { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.pub-grid-h { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.pub-grid-h span { text-align: center; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.pub-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pub-cell { min-height: 92px; border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px; background: var(--bg-card); }
.pub-cell.empty { background: transparent; border: none; }
.pub-day { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; }
.pub-ev { font-size: 11.5px; color: #fff; background: #3a3a3a; border-radius: 6px; padding: 4px 6px; margin-bottom: 4px; line-height: 1.25; }
.pub-ev small { display: block; opacity: .7; font-size: 10px; }
.pub-ev.st-publicado { background: var(--tag-green-bg); }
.pub-ev.st-arte_listo { background: var(--tag-orange-bg); }
.pub-ev.st-aprobado { background: var(--tag-blue-bg); }
.pub-foot { text-align: center; color: var(--text-faint); font-size: 12px; margin-top: 24px; }
@media (max-width: 620px) { .pub-cell { min-height: 62px; } .pub-ev { font-size: 10px; } }

/* ===== Paginación (registro de avisos en Estadísticas) ===== */
.pgn { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; }
.pgn-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text-muted); font: 12px/1 var(--font); padding: 6px 12px; cursor: pointer;
    transition: background .1s ease, color .1s ease; }
.pgn-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-strong); }
.pgn-btn:disabled { opacity: .35; cursor: default; }
.pgn-info { color: var(--text-faint); font-size: 12px; white-space: nowrap; }

/* ============ EQUIPO v4: tarjetas de miembro ============ */
.mem-card { padding: 14px 16px; }
.mem-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mem-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 700; color: rgba(255,255,255,.92); user-select: none; }
.mem-avatar.av-admin { background: var(--tag-red-bg); }
.mem-avatar.av-cmm { background: var(--tag-purple-bg); }
.mem-avatar.av-designer { background: var(--tag-blue-bg); }
.mem-info { flex: 1; min-width: 180px; }
.mem-name { font-size: 16px; font-weight: 700; color: var(--text-strong); line-height: 1.25; }
.mem-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
.mem-meta { display: block; color: var(--text-muted); font-size: 12.5px; }
.mem-card .mem-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mem-more { font-weight: 700; letter-spacing: 1px; }
.mem-hidden { display: none !important; }
@media (max-width: 820px) {
    #equipo-zone .mem-actions { margin-left: 58px; }   /* alineado con el texto, no bajo el avatar */
    #equipo-zone .mem-actions .mem-more { flex: 0 0 auto; min-width: 48px; }
}

/* ============ EQUIPO v4: peek "Editar / Nuevo miembro" ============ */
.mu-title { font-size: 24px; font-weight: 700; color: var(--text-strong); margin: 2px 0 4px;
    overflow-wrap: anywhere; }
.peek .mu-title + h3.sec { margin-top: 18px; }
.mu-pass-row { display: flex; gap: 6px; align-items: center; }
.mu-pass-row input { flex: 1; min-width: 0; }
.mu-pass-row .btn.mini { flex: 0 0 auto; }
.mu-skills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.mu-skill { border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted);
    border-radius: 16px; padding: 5px 13px; font-size: 13px; cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease; }
.mu-skill:hover { background: var(--bg-hover); color: var(--text); }
.mu-skill.on { background: var(--tag-green-bg); border-color: var(--tag-green-bg); color: var(--tag-green-fg); }
.mu-ta { width: 100%; min-height: 74px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 10px; font-size: 13.5px; color: var(--text); resize: vertical; }
.mu-save { margin-top: 24px; width: 100%; }

/* arrastrar eventos/tareas en el calendario de Mi tablero */
.ncal-item[draggable="true"] { cursor: grab; }
.ncal-item.dragging { opacity: .4; }
.ncal-cell.drop-on { background: rgba(82,156,202,.18); outline: 2px dashed var(--accent); outline-offset: -2px; }

/* ===== Chat IA más tradicional (burbujas) ===== */
.ai-scroll { gap: 10px; }
.ai-msg { max-width: 80%; padding: 10px 14px; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.ai-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.ai-user b { color: #fff; }
.ai-bot { align-self: flex-start; background: var(--bg-card); color: var(--text); border: 1px solid var(--border-soft); border-bottom-left-radius: 5px; padding: 11px 15px; border-radius: 16px; max-width: 84%; position: relative; }
.ai-bot.ai-loading { background: var(--bg-card); }
/* barra de parámetros del chat: no se aprieta, hace wrap en móvil */
.ai-params { flex-wrap: wrap; row-gap: 6px; }
.ai-params .ai-pill { font-size: 12.5px; padding: 5px 11px; }
@media (max-width: 640px) { .ai-msg { max-width: 90%; } }

/* acción rápida en Inicio + puntito de pendientes en el menú */
.quick-add { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin: 4px 0 18px; }
.quick-add .qa-ic { color: var(--text-muted); font-size: 16px; }
.quick-add input { flex: 1; background: none; border: none; color: var(--text); font-size: 14px; }
.quick-add input:focus { box-shadow: none; }
.sb-dot { width: 8px; height: 8px; border-radius: 50%; background: #EB5757; margin-left: auto; flex: 0 0 8px; }

/* ============================================================
   AUDITORÍA MÓVIL ≤480px  (pantallas 360–430px)
   Objetivo: CERO scroll horizontal del body; tablas y kanbans
   scrollean DENTRO de su caja; texto legible; toques ≥32px.
   Cada regla lleva el porqué. Complementa el bloque de 820px.
   ============================================================ */

/* Red de seguridad general: nada dentro de la app debe desbordar a lo ancho.
   (No ponemos overflow-x:hidden en body/html para no romper position:sticky
    del topbar y el sidebar; en su lugar contenemos por componente.) */
.app, .main, .content { max-width: 100%; }
.main { overflow-x: clip; }              /* corta desbordes accidentales sin crear scroll-container que rompa sticky */

@media (max-width: 480px) {
    /* 0 · Lienzo: menos padding lateral para ganar ancho real */
    .content { padding: 10px 12px 84px; }
    .page-title { font-size: 24px; }
    .page-icon { font-size: 46px; margin: 14px 0 6px; }

    /* 0b · Topbar: que migas + campana + usuario quepan (el usuario ya está en el sidebar) */
    .topbar { padding: 8px 12px; gap: 8px; }
    .tb-right { gap: 8px; }
    .tb-user { display: none; }

    /* 1 · ESTADÍSTICAS
       KPIs: forzar 2 columnas con minmax(0,·) para que NUNCA desborden
       (repeat(auto-fill,minmax(160px)) sí desbordaba a ~375px → scroll del body). */
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kpi b { font-size: 19px; }
    /* st-grid ya pasa a 1 col en 820px; donut/bars ya hacen wrap. Etiqueta de barra más corta. */
    .barh-lbl { flex-basis: 96px; }
    /* Gantt: la tabla scrollea DENTRO de .gantt-wrap; achico la 1ª col sticky para ver más días */
    .gantt-wrap { -webkit-overflow-scrolling: touch; }
    .gantt th.g-cli, .gantt td.g-cli { min-width: 112px; padding: 6px 8px; }

    /* 2 · Registro de avisos (paginación) + Sesiones: tablas ya scrollean en .ntable-wrap */
    .pgn { gap: 8px; flex-wrap: wrap; }
    .pgn-btn { min-height: 32px; }
    .pgn-info { flex-basis: 100%; text-align: center; order: -1; }

    /* 3 · RANKING: stats debajo del nombre (además del bloque de 640px) */
    .rank-row { flex-wrap: wrap; row-gap: 6px; }
    .rank-name { flex: 1 1 auto; min-width: 0; }
    .rank-stats { flex-basis: 100%; padding-left: 40px; white-space: normal; }

    /* 4 · INICIO
       quick-add: input flexible sin desbordar; tarjetas de cliente apiladas 1 col */
    .quick-add input { min-width: 0; }
    .grid-cards { grid-template-columns: 1fr; }
    .sem-item { flex-wrap: wrap; row-gap: 2px; }

    /* 5 · EQUIPO: avatar + acciones (el bloque 820px ya alinea; aquí evito que botones se salgan) */
    .mem-info { min-width: 140px; }
    #equipo-zone .mem-actions { margin-left: 58px; gap: 6px; }
    #equipo-zone .mem-actions .btn.mini,
    #equipo-zone .mem-actions .mem-more { min-height: 32px; }

    /* 6 · CHAT IA (Crear contenido)
       Altura con teclado móvil (dvh); pills de parámetros SIEMPRE en wrap sin cortarse */
    .ai-chat { height: calc(100dvh - 76px); max-width: 100%; }
    .ai-params { gap: 6px; row-gap: 6px; }
    .ai-pill { padding: 6px 12px; white-space: nowrap; }
    .ai-top { gap: 6px; }
    .ai-top select { flex: 1 1 46%; }
    .ai-msg { max-width: 92%; }
    .ai-idea .ai-i-meta, .ai-i-quick, .ai-i-acts { flex-wrap: wrap; }
    .ai-form { padding: 5px 5px 5px 14px; }

    /* 7 · PÁGINA DE CLIENTE
       cli-nav ya hace wrap; carpetas: recortar link largo (no romper la fila) */
    .cli-nav { gap: 6px; }
    .carp-row { gap: 6px; }
    .carp-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Board (columnas de estado): scroll horizontal DENTRO del contenedor, columnas más angostas */
    .board { gap: 10px; }
    .bcol { flex-basis: 208px; }
    /* Content Calendar y demás tablas ya viven en .ntable-wrap (overflow-x:auto). */
    /* PEEK: casi pantalla completa y su contenido scrollea (top/right/bottom ya fijados) */
    .peek { padding: 14px 14px 56px; }
    .ftable td:first-child { width: 92px; }
    .flow-bar { gap: 6px; }
    .fb-btn { min-height: 32px; }

    /* 8 · MI TABLERO
       Kanban con scroll horizontal interno; calendario legible; chips de grupo en wrap */
    .tab-board { gap: 10px; }
    .tab-col { flex: 0 0 258px; max-width: 258px; }
    .tab-switch { flex-wrap: wrap; }
    .grupo-filtro { gap: 5px; }
    .gf-chip { min-height: 30px; }
    .ncal-cell { min-height: 52px; padding: 4px; }
    .ncal-h { padding: 5px 6px; }
    .ncal-item { font-size: 10px; padding: 2px 5px; }

    /* 9 · VISTA PÚBLICA /ver/:token — 7 columnas: celdas chicas, gaps mínimos (sin romper) */
    .pub-wrap { padding: 18px 10px 48px; }
    .pub-grid, .pub-grid-h { gap: 3px; }
    .pub-cell { min-height: 58px; padding: 4px; }
    .pub-ev { font-size: 10px; padding: 3px 5px; }
    .pub-title { font-size: 24px; }

    /* 10 · MODALES + editor de guion
       Modal a ancho completo (algunos traen max-width inline → forzamos con !important) */
    .modal-bg { padding: 10px; }
    .modal { width: 100% !important; max-width: 100% !important; padding: 18px 16px; }
    .modal textarea, .mu-ta { min-height: 78px; }
    .rt-bar { gap: 4px; row-gap: 4px; }              /* botones del editor caben / hacen wrap */
    .rt-bar button { width: 32px; height: 30px; }    /* toque ≥32px */

    /* 11 · BARRAS DE HERRAMIENTAS que se apretaban → wrap y buscador a lo ancho */
    .db-head { flex-wrap: wrap; row-gap: 6px; }
    .db-tools { margin-left: 0; flex-wrap: wrap; }
    .db-title { font-size: 18px; }
    .fbar { gap: 6px; }
    .fb-q { width: 100%; }
    .fb-btn2, .chip-q { min-height: 30px; }
    .seg { flex-wrap: wrap; }

    /* 12 · Menús flotantes tipo Notion: no más anchos que la pantalla */
    .nmenu { width: 260px; max-width: calc(100vw - 20px); }
    .notif-pop { right: 10px; width: auto; left: 10px; max-width: none; }

    /* 13 · Permisos por cliente: 1 columna para que no se corten los labels */
    .perm-grid { grid-template-columns: 1fr; }

    /* 14 · Inputs de propiedades tipo Notion: etiqueta más angosta deja más ancho al valor */
    .prop-k { flex-basis: 108px; }
}

/* ===== Asistente flotante ===== */
#asis-fab { position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 350; display: flex; align-items: center; justify-content: center; transition: transform .12s ease; }
#asis-fab:hover { transform: scale(1.06); }
#asis-panel { position: fixed; right: 20px; bottom: 84px; width: 360px; max-width: calc(100vw - 24px); height: 480px; max-height: calc(100dvh - 110px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.5); z-index: 350; display: flex; flex-direction: column; overflow: hidden; animation: popIn .16s ease; }
.asis-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.asis-head b { color: var(--text-strong); }
.asis-head #asis-x { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; }
.asis-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.asis-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.asis-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.asis-bot { align-self: flex-start; background: var(--bg-input); color: var(--text); border-bottom-left-radius: 5px; }
.asis-conf b { display: block; margin-bottom: 3px; }
.asis-conf-btns { display: flex; gap: 8px; margin-top: 8px; }
.asis-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border-soft); }
.asis-form input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: 18px; padding: 9px 14px; color: var(--text); font-size: 13.5px; }
.asis-form button { width: 38px; border: none; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; }
@media (max-width: 480px) { #asis-panel { right: 8px; left: 8px; width: auto; bottom: 78px; } }

/* botón de archivar una tarea (aparece al pasar el mouse sobre la tarjeta) */
.tab-card { position: relative; }
.tab-arch-btn { position: absolute; top: 6px; right: 6px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1; opacity: 0; transition: opacity .12s ease; z-index: 2; }
.tab-card:hover .tab-arch-btn { opacity: 1; }
.tab-arch-btn:hover { border-color: var(--accent); color: var(--text); }
@media (hover: none) { .tab-arch-btn { opacity: .6; } }
.tab-star-btn { font-size: 14px; }
.tab-star-btn.on { opacity: 1; color: #E9C46A; border-color: transparent; background: transparent; }
.tab-card .tab-card-txt { display: block; padding-right: 26px; }   /* que el botón de la esquina no tape el texto */

/* ===== Portal del cliente (Fase 1: semáforo, resumen, detalle) ===== */
.pub-resumen { max-width: 640px; margin: 8px auto 18px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; }
.pub-res-top { font-size: 15px; color: var(--text-strong); }
.pub-bar { height: 8px; background: var(--bg-hover); border-radius: 5px; overflow: hidden; margin: 8px 0; }
.pub-bar span { display: block; height: 100%; background: var(--tag-green-bg); transition: width .5s; }
.pub-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.pub-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.dot.listo, .pub-badge.listo, .pub-item-est.listo { }
.dot.listo { background: #4FB076; } .dot.proceso { background: #E0B44F; } .dot.planificado { background: #6E6E6E; }
.pub-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.pub-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 4px solid #6E6E6E; border-radius: 10px; padding: 12px 14px; cursor: default; color: var(--text); }
.pub-item.listo { border-left-color: #4FB076; cursor: pointer; } .pub-item.proceso { border-left-color: #E0B44F; }
.pub-item.listo:hover { background: var(--bg-hover); }
.pub-item-date { flex: 0 0 54px; font-size: 12px; color: var(--text-muted); text-align: center; }
.pub-item-body { flex: 1; min-width: 0; } .pub-item-body b { display: block; font-size: 14.5px; } .pub-item-body small { color: var(--text-faint); font-size: 12px; }
.pub-item-est { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.pub-item-est.listo { background: rgba(79,176,118,.16); color: #7FD1A3; } .pub-item-est.proceso { background: rgba(224,180,79,.16); color: #E6D06F; } .pub-item-est.planificado { background: var(--bg-hover); color: var(--text-muted); }
.pub-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 12px; }
.pub-badge.listo { background: rgba(79,176,118,.16); color: #7FD1A3; } .pub-badge.proceso { background: rgba(224,180,79,.16); color: #E6D06F; } .pub-badge.planificado { background: var(--bg-hover); color: var(--text-muted); }
.pub-sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 500; display: flex; align-items: flex-end; justify-content: center; }
.pub-sheet { width: 100%; max-width: 560px; max-height: 92vh; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px 18px 0 0; overflow: hidden; animation: sheetUp .22s cubic-bezier(.22,.61,.36,1); }
@keyframes sheetUp { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 620px) { .pub-sheet-bg { align-items: center; } .pub-sheet { border-radius: 16px; } }
.pub-sheet-head { display: flex; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); }
.pub-sheet-head b { flex: 1; font-size: 17px; color: var(--text-strong); }
.pub-sheet-x { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.pub-sheet-scroll { padding: 16px 18px 28px; overflow-y: auto; max-height: calc(92vh - 60px); }
.pub-meta { color: var(--text-muted); font-size: 13px; margin: 8px 0 14px; }
.pub-art-btn { display: block; text-align: center; background: var(--accent); color: #fff; padding: 12px; border-radius: 10px; text-decoration: none; font-weight: 600; margin-bottom: 10px; }
.pub-vars { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .pub-vars a { font-size: 12.5px; color: var(--accent); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; text-decoration: none; }
.pub-block { margin-bottom: 16px; } .pub-block b { display: block; color: var(--text-strong); margin-bottom: 4px; } .pub-block p { line-height: 1.55; white-space: pre-wrap; }
.pub-block textarea { width: 100%; margin: 8px 0; min-height: 70px; }
.pub-cmt-send { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 10px 18px; font-weight: 600; cursor: pointer; }
.pub-cmt-done { color: #7FD1A3; font-size: 13px; margin-top: 8px; }
.pub-mine { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 10px; } .pub-mine-c { font-size: 13px; padding: 7px 0; color: var(--text-muted); } .pub-mine-c small { display: block; color: var(--text-faint); font-size: 11px; }

/* Portal cliente: toggle Lista/Calendario + rejilla */
.pub-vtoggle { display: flex; gap: 6px; justify-content: center; margin: 0 auto 16px; max-width: 640px; }
.pub-vtoggle button { flex: 1; max-width: 160px; background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-muted); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; }
.pub-vtoggle button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pub-grid-h { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; padding: 0 2px 5px; }
.pub-grid-h span { text-align: center; }
.pub-cal { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pub-cell { min-height: 74px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 9px; padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.pub-cell.empty { background: transparent; border: none; }
.pub-cn { font-size: 11px; color: var(--text-faint); }
.pub-cev { text-align: left; border: none; border-left: 3px solid var(--gray, #6E6E6E); background: var(--bg-hover); color: var(--text); font-size: 10.5px; line-height: 1.2; padding: 3px 5px; border-radius: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pub-cev.listo { border-left-color: #4FB076; cursor: pointer; } .pub-cev.proceso { border-left-color: #E0B44F; } .pub-cev.planificado { border-left-color: #6E6E6E; }
@media (max-width: 560px) { .pub-cell { min-height: 54px; } .pub-cev { font-size: 9px; -webkit-line-clamp: 1; } .pub-grid-h span { font-size: 9px; } }

/* La IA flotante NO aparece en "Crear contenido" (tapa el botón de enviar) ni sobre un peek/modal en móvil */
body:has(.ai-chat) #asis-fab, body:has(.ai-chat) #asis-panel { display: none !important; }
@media (max-width: 700px) {
    body.peek-open #asis-fab, body:has(.modal-bg) #asis-fab, body:has(.pub-sheet-bg) #asis-fab { display: none !important; }
}

/* Festivos / días especiales en los calendarios */
.cal-cell.hasfest { background: rgba(224,180,79,.05); }
.cal-fest { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #E6D08A; background: rgba(224,180,79,.12); border-radius: 5px; padding: 2px 5px; margin-bottom: 3px; line-height: 1.25; }
.cal-fest-add { margin-left: auto; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 4px; border: none; background: rgba(224,180,79,.25); color: #E6D08A; font-size: 12px; line-height: 1; cursor: pointer; }
.cal-fest-add:hover { background: var(--accent); color: #fff; }
.ncal-fest { font-size: 9.5px; color: #E6D08A; background: rgba(224,180,79,.12); border-radius: 4px; padding: 1px 4px; margin: 2px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* progreso del plan de publicaciones del cliente */
.meta-prog { font-size: 12px; margin-left: 8px; padding: 2px 8px; border-radius: 10px; }
.meta-prog.ok { background: rgba(79,176,118,.15); color: #7FD1A3; }
.meta-prog.low { background: var(--bg-hover); color: var(--text-muted); }

/* ============================================================
   ===== MOBILE UX v2 =====
   Rediseño a fondo de la experiencia móvil (viewport 360–430px).
   Breakpoint principal: 700px · Afinado extra: 430px.
   Principios: tamaños táctiles ≥40-44px, texto base 15px,
   bottom-sheets nativos (peek, modal, nmenu), scroll-snap en
   kanbans, animaciones sutiles con respeto a reduced-motion,
   safe-areas iOS. TODO vive dentro de media queries → desktop
   queda intacto. !important solo donde hay estilos inline (JS)
   o reglas previas con !important.
   ============================================================ */

/* ---- Keyframes propios (inofensivos fuera de las MQ) ---- */
@keyframes muxSheetUp {                    /* hoja que sube desde abajo */
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes muxSheetSoft {                  /* subida corta + fade (menús) */
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes muxViewIn {                     /* cambio de vista: fade+slide sutil */
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes muxToastIn {                    /* toast entra deslizando */
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 700px) {

    /* ========== 1 · LEGIBILIDAD + TAMAÑOS TÁCTILES ========== */
    body { font-size: 15px; }              /* base más grande: “todo se ve chico” */
    input, select, textarea { font-size: 16px !important; }   /* evita auto-zoom iOS */

    /* Botonería: zona táctil mínima 40px en TODOS los controles frecuentes */
    .btn, .ghost-btn, .fb-btn, .fb-btn2, .ai-pill, .rtab,
    .chip-q, .gf-chip, .td-asig, .pgn-btn, .db-tools button,
    .seg button, .tab-switch button, .nav-quick button, .btn-del,
    .notif-clear, .team-def, .mu-skill, .pub-vtoggle button {
        min-height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .btn { padding: 9px 16px; font-size: 14px; border-radius: 8px; }
    .ghost-btn { font-size: 13.5px; padding: 6px 12px; }
    .fb-btn { font-size: 14px; padding: 8px 14px; border-radius: 8px; }

    /* Checkboxes de tareas: de 15-16px → 20px (dedo, no mouse) */
    .ncheck, .tab-chk,
    .pkt-step input[type="checkbox"], .pkt-hecha-l input,
    .ev-chk input, .perm-grid input[type="checkbox"] {
        width: 20px !important; height: 20px !important; min-width: 20px;
    }
    .todo-item { padding: 7px 0; }
    .pkt-step { padding: 10px 6px; font-size: 14.5px; }
    .pkt-step-x { opacity: 1; font-size: 15px; padding: 6px 10px; }  /* sin hover en táctil */
    .tag { font-size: 13px; padding: 2px 9px; }
    .cmt-t { font-size: 14.5px; }
    .cmt-form input { min-height: 44px; }
    .cmt-form .btn { min-height: 44px; }

    /* ========== 2 · PEEK = HOJA A PANTALLA COMPLETA ========== */
    .peek {
        top: max(14px, env(safe-area-inset-top)) !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; max-width: 100% !important;
        border-left: none; border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        padding: 0 16px calc(64px + env(safe-area-inset-bottom));
        box-shadow: 0 -22px 70px rgba(0,0,0,.6);
    }
    .peek:not(.hidden) { animation: muxSheetUp .32s cubic-bezier(.32,.72,.33,1) both; }
    /* Cabecera del peek: fija arriba, con asa de “hoja” y cierre grande */
    .peek-top {
        position: sticky; top: 0; z-index: 12;
        background: rgba(25,25,25,.94);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        margin: 0 -16px 14px; padding: 16px 12px 10px;
        border-bottom: 1px solid var(--border-soft);
        border-radius: 16px 16px 0 0;
    }
    .peek-top::before {                    /* asa tipo bottom-sheet */
        content: ""; position: absolute; top: 6px; left: 50%;
        transform: translateX(-50%);
        width: 42px; height: 4px; border-radius: 2px;
        background: rgba(255,255,255,.22);
    }
    .peek-top button {
        min-width: 40px; min-height: 40px; font-size: 18px;
        background: var(--bg-card); border: 1px solid var(--border-soft);
        border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    #peek-close { font-size: 22px; }
    .peek-title { font-size: 24px; }
    .peek h3.sec { font-size: 19px; margin-top: 22px; }
    /* Propiedades APILADAS: etiqueta arriba, valor abajo y legible */
    .peek .prop-row, .props .prop-row {
        flex-direction: column; align-items: stretch;
        gap: 3px; padding: 8px 0; min-height: 0;
    }
    .prop-k { flex-basis: auto; font-size: 12.5px; letter-spacing: .02em; }
    .prop-v { font-size: 15px; }
    .prop-chip { min-height: 40px; width: 100%; padding: 8px 10px;
        border: 1px solid var(--border-soft); border-radius: 8px;
        background: rgba(255,255,255,.02); }
    /* Tabla de campos del post (Copy/Hashtags…): más aire y texto */
    .ftable td { padding: 10px; font-size: 14px; }
    .ftable textarea, .ftable input { font-size: 16px !important; }
    .flow-bar { padding: 12px; gap: 8px; border-radius: 10px; }
    .fb-btn { flex: 1 1 auto; }            /* botones de flujo a lo ancho */

    /* ========== 3 · NMENU → BOTTOM-SHEET ==========
       El JS posiciona el menú con left/top inline → se gana con !important. */
    .nmenu {
        position: fixed !important;
        left: 8px !important; right: 8px !important;
        top: auto !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important; max-width: none !important;
        max-height: 55vh; overflow-y: auto;
        border-radius: 14px; padding: 10px;
        /* sombra fuerte + scrim gigante que oscurece el fondo sin backdrop extra */
        box-shadow: 0 0 0 100vmax rgba(0,0,0,.42), 0 -14px 44px rgba(0,0,0,.6);
        animation: muxSheetSoft .22s cubic-bezier(.32,.72,.33,1) !important;
        -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    .nm-list { max-height: none; }         /* scrollea el sheet completo */
    .nm-it { min-height: 44px; padding: 10px 12px; font-size: 15px; border-radius: 8px; }
    .nm-q { min-height: 42px; font-size: 16px !important; }
    .nm-new { padding-top: 10px; }
    /* date-picker flotante de celdas: también abajo, cómodo */
    .cell-date {
        left: 8px !important; right: 8px !important; top: auto !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 12px; border-radius: 14px;
        box-shadow: 0 0 0 100vmax rgba(0,0,0,.42), 0 -14px 44px rgba(0,0,0,.6);
        animation: muxSheetSoft .22s cubic-bezier(.32,.72,.33,1);
    }

    /* ========== 4 · MODALES = BOTTOM-SHEET ========== */
    .modal-bg { align-items: flex-end !important; padding: 0 !important; }
    .modal {
        width: 100% !important; max-width: 100% !important;
        border-radius: 18px 18px 0 0; border-bottom: none;
        max-height: 92dvh;
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
        animation: muxSheetUp .3s cubic-bezier(.32,.72,.33,1);
        overscroll-behavior: contain;
    }
    .modal h3 { font-size: 18px; }
    .modal-actions { gap: 10px; margin-top: 18px; }
    .modal-actions button, .modal-actions .btn {
        flex: 1 1 auto; min-height: 44px; font-size: 15px; border-radius: 10px;
    }
    .emoji-modal { width: 100% !important; max-width: 100% !important; }
    .emoji-cell { font-size: 26px; padding: 8px 0; }

    /* ========== 5 · CHAT IA (Crear contenido) ========== */
    .ai-form { padding: 6px 6px 6px 16px; border-radius: 28px; }
    .ai-form input { min-height: 46px; font-size: 16px !important; }
    .ai-send { width: 46px; height: 46px; }
    /* pills de parámetros: UNA fila con scroll horizontal (no comen pantalla) */
    .ai-params {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding: 8px 2px 10px; scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .ai-params::-webkit-scrollbar { display: none; }
    .ai-pill { flex: 0 0 auto; min-height: 40px; font-size: 13px; padding: 7px 13px; }
    /* sugerencias iniciales: chips compactos */
    .ai-sug { padding: 7px 12px; font-size: 12.5px; min-height: 36px;
        display: inline-flex; align-items: center; }
    .ai-hello h2 { font-size: 24px; }
    .ai-hello { padding: 14px; }
    .ai-msg { font-size: 15px; }
    .ai-top select { min-height: 40px; }
    .content:has(.ai-chat) { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

    /* ========== 6 · SIDEBAR MÓVIL ========== */
    .sidebar {
        width: 292px;
        transition: transform .32s cubic-bezier(.32,.72,0,1);  /* deslizado suave */
        box-shadow: 24px 0 60px rgba(0,0,0,.45);
        padding-top: calc(10px + env(safe-area-inset-top));
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    body.sb-open .sb-backdrop { animation: fadeIn .25s ease both; }
    .sb-item {
        min-height: 44px; padding: 9px 12px; gap: 10px;
        font-size: 15px; border-radius: 8px;
    }
    .sb-ic { width: 20px; font-size: 15px; }
    .sb-ic svg { width: 19px; height: 19px; }
    .sb-item.active {                       /* ítem activo bien visible */
        background: rgba(255,255,255,.09); color: #fff; font-weight: 600;
        box-shadow: inset 3px 0 0 var(--accent);
    }
    .sb-sec { font-size: 12px; padding: 16px 12px 6px; }
    .sb-close { min-width: 40px; min-height: 40px; font-size: 18px; }
    .ws { padding: 6px 10px 14px; }
    .sb-count { font-size: 12px; padding: 2px 8px; }

    /* ========== 7 · TABLAS ========== */
    .ntable-wrap {
        -webkit-overflow-scrolling: touch;   /* inercia nativa */
        overscroll-behavior-x: contain;
    }
    .ntable th { padding: 10px; font-size: 12.5px; }
    .ntable td { padding: 10px; font-size: 14.5px; }
    .row-name { min-width: 190px; font-size: 15px; }   /* 1ª col (Name) más legible */
    .row-name .open-btn, .row-actions button { opacity: 1; }  /* táctil: sin hover, siempre visibles */
    .row-name .open-btn { min-height: 32px; padding: 4px 10px; font-size: 11px; }
    .new-row { padding: 12px 10px; }
    .gantt-wrap { -webkit-overflow-scrolling: touch; }

    /* ========== 8 · KANBAN CON SCROLL-SNAP (se siente nativo) ========== */
    .board, .tab-board {
        flex-wrap: nowrap;               /* en móvil: swipe horizontal, no wrap */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 12px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .board .bcol, .tab-board .tab-col {
        flex: 0 0 78vw; max-width: 78vw;
        scroll-snap-align: start;
    }
    .tab-addcol { flex: 0 0 62vw; scroll-snap-align: start; }
    .bcard { padding: 12px 13px; font-size: 14px; border-radius: 9px; }
    .bcol-h { font-size: 13.5px; padding: 4px 6px 10px; }
    .tab-card { padding: 12px; border-radius: 10px; }
    .tab-card-txt { font-size: 14.5px; }
    .tab-card-nota { font-size: 13px; }
    .tab-newtask { min-height: 42px; font-size: 14px; }
    .tab-arch-btn { width: 30px; height: 30px; font-size: 13px; }

    /* ========== 9 · ANIMACIONES GLOBALES (con gusto, nada excesivo) ========== */
    #content > * { animation: muxViewIn .18s ease both; }     /* cambio de vista */
    .btn:active, .ghost-btn:active, .fb-btn:active, .fb-btn2:active,
    .ai-pill:active, .ai-sug:active, .nm-it:active, .sb-item:active,
    .bcard:active, .tab-card:active, .ccard:active, .chip-q:active,
    .gf-chip:active, .pub-item.listo:active, .tab-switch button:active {
        transform: scale(.97);
        transition: transform .08s ease;
    }
    .toasts {
        left: 12px; right: 12px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        align-items: stretch;
    }
    .toast {
        animation: muxToastIn .28s cubic-bezier(.32,.72,.33,1);
        text-align: center; padding: 13px 18px;
        font-size: 14px; border-radius: 12px;
    }
    .notif-pop:not(.hidden) { animation: muxSheetSoft .2s ease; }

    /* ========== 10 · ASISTENTE FLOTANTE ========== */
    #asis-fab {
        right: 16px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        width: 56px; height: 56px;
    }
    #asis-fab:active { transform: scale(.94); }
    #asis-panel {                            /* panel casi a pantalla completa */
        left: 8px; right: 8px; width: auto;
        top: max(14px, env(safe-area-inset-top));
        bottom: calc(12px + env(safe-area-inset-bottom));
        height: auto; max-height: none;
        border-radius: 18px;
        animation: muxSheetSoft .24s cubic-bezier(.32,.72,.33,1);
    }
    .asis-form { padding: 10px; }
    .asis-form input { min-height: 46px; font-size: 16px !important; }
    .asis-form button { width: 46px; height: 46px; flex: 0 0 46px; }
    .asis-msg { font-size: 14.5px; }
    .asis-head #asis-x { min-width: 40px; min-height: 40px; font-size: 18px; }
    /* (las reglas que OCULTAN fab/panel usan display:none !important y siguen intactas) */

    /* ========== 11 · CABECERAS / TOPBAR ========== */
    .page-title { font-size: 27px; line-height: 1.2; }
    .page-icon { font-size: 44px; margin: 12px 0 6px; }
    .h-bar { font-size: 15px; margin: 24px 0 10px; }
    .topbar { min-height: 48px; padding: 6px 10px; gap: 8px; }
    .tb-menu { min-width: 44px; min-height: 44px; display: inline-flex;
        align-items: center; justify-content: center; padding: 0; }
    .tb-crumbs { flex: 1; text-align: center; font-size: 14.5px;
        color: var(--text-strong); font-weight: 500; }
    .tb-bell { min-width: 40px; min-height: 40px; display: inline-flex;
        align-items: center; justify-content: center; }
    .db-title { font-size: 19px; }

    /* ========== 12 · FORMULARIOS (.fld) ========== */
    .fld { margin-bottom: 12px; }
    .fld label, .modal .fld label {
        font-size: 13px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px;
    }
    .fld input, .fld select, .modal .fld input, .modal .fld select { min-height: 44px; }
    .login-box input { min-height: 48px; }
    .btn-primary { min-height: 48px; font-size: 15.5px; }
    .quick-add { padding: 10px 14px; }
    .quick-add input { font-size: 16px !important; }
    .perm-grid label { min-height: 40px; font-size: 14px; }

    /* ========== 13 · SAFE AREAS iOS extra ========== */
    .content { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

    /* ========== 14 · PORTAL PÚBLICO (.pub-*) ========== */
    .pub-item { padding: 14px; font-size: 15px; gap: 12px; }
    .pub-item-body b { font-size: 15px; }
    .pub-item-body small { font-size: 12.5px; }
    .pub-item-est { font-size: 12px; }
    .pub-sheet-x {                           /* cierre grande y obvio */
        width: 42px; height: 42px; min-width: 42px;
        font-size: 22px; border-radius: 50%;
        background: var(--bg-hover);
        display: inline-flex; align-items: center; justify-content: center;
    }
    .pub-sheet-scroll {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
        max-height: calc(92dvh - 60px);
        -webkit-overflow-scrolling: touch;
    }
    .pub-art-btn { padding: 14px; font-size: 15px; }
    .pub-cmt-send { min-height: 46px; width: 100%; }
    .pub-vtoggle button { font-size: 14px; }
    .pub-nav button { width: 40px; height: 40px; }
}

/* ========== AFINADO EXTRA ≤430px (360–430: la mayoría de los teléfonos) ========== */
@media (max-width: 430px) {
    .content { padding-left: 12px; padding-right: 12px; }
    .page-title { font-size: 26px; }
    .peek-title { font-size: 22px; }
    /* kanban: columna un pelín más ancha para aprovechar pantallas angostas */
    .board .bcol, .tab-board .tab-col { flex: 0 0 84vw; max-width: 84vw; }
    .ai-msg { max-width: 94%; }
    .kpi b { font-size: 20px; }
    .modal { padding-left: 14px; padding-right: 14px; }
    .flow-bar { padding: 10px; }
    .ftable td:first-child { width: 96px; }
    .sidebar { width: min(292px, 86vw); }
    .pub-item-date { flex-basis: 48px; }
}

/* ========== RESPETO A prefers-reduced-motion (mata TODO lo de este bloque) ========== */
@media (prefers-reduced-motion: reduce) {
    .peek, .modal, .nmenu, .cell-date, .toast, .notif-pop,
    #content > *, #asis-panel, .sidebar, .sb-backdrop {
        animation: none !important;
        transition: none !important;
    }
    .btn:active, .ghost-btn:active, .fb-btn:active, .ai-pill:active,
    .nm-it:active, .sb-item:active, .bcard:active, .tab-card:active {
        transform: none !important;
    }
}
/* ===== FIN MOBILE UX v2 ===== */

/* Panel de producción (Starling): estimado y separadores */
.kpi-est { border: 1px dashed var(--border); } .kpi-est b { color: #E6D08A; }
.prod-sep { background: var(--bg-hover); font-size: 12px; color: var(--text-muted); font-weight: 600; }
.prod-est td { opacity: .72; }

/* fix visual: chip de festivo (el + se salía cuando el nombre ocupa 2 líneas) + nav de mes del calendario */
.cal-fest { align-items: flex-start; max-width: 100%; box-sizing: border-box; }
.cal-fest .cf-t { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.cal-fest-add { flex: 0 0 16px; margin-top: 1px; }
.cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-head [data-calnav] { min-width: 30px; }

/* Mi tablero (diseñador): diseños asignados */
.dis-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.dis-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 11px 14px; cursor: pointer; color: var(--text); }
.dis-item:hover { background: var(--bg-hover); }
.dis-cli { font-size: 18px; flex: 0 0 auto; }
.dis-body { flex: 1; min-width: 0; } .dis-body b { display: block; font-size: 14px; } .dis-body small { color: var(--text-faint); font-size: 12px; }

/* plantillas rápidas de fechas marcadas */
.ev-plantillas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.ev-plantillas .ai-pill.mini { font-size: 12px; padding: 5px 10px; min-height: 30px; }

/* Vista Pagos */
.pago-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.pago-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pago-head b { font-size: 15px; color: var(--text-strong); }
.pago-nums { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pago-why { font-size: 13px; color: var(--text-muted); margin: 6px 0; line-height: 1.5; }
.pago-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Fechas importantes en Inicio */
.fechas-list .sem-item { cursor: default; }
.fdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
@media (max-width: 700px) { .quick-add { flex-wrap: nowrap; } .quick-add input { min-width: 0; } .quick-add .btn.mini { min-height: 40px; white-space: nowrap; } }

/* premio del ranking */
.rank-premio { background: rgba(224,180,79,.08); border: 1px solid rgba(224,180,79,.25); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-top: 10px; color: var(--text); }

/* ===== Pagos v2: compacto en PC ===== */
.pagos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.pago-card { margin-bottom: 0; }
.pago-card .kpi { padding: 8px 12px; }
.pago-card .kpi b { font-size: 17px; }
.pago-card .kpi small { font-size: 11px; }
.pago-head b { font-size: 14.5px; }
.pago-acts .btn.mini, .pago-acts .ghost-btn.mini { font-size: 12.5px; }
.kpi-ok { border: 1px solid rgba(79,176,118,.4); } .kpi-ok b { color: #7FD1A3; }
.kpi-bad { border: 1px solid rgba(197,107,99,.5); } .kpi-bad b { color: #E08F8F; }
.ig-inp { width: 130px; text-align: right; background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: 7px; padding: 6px 9px; color: var(--text); }
.ig-inp:focus { border-color: var(--accent); }
@media (max-width: 700px) { .pagos-grid { grid-template-columns: 1fr; } }

/* cards de clientes v2 (Inicio) */
.ccard2 { position: relative; }
.cc-top { display: flex; align-items: flex-start; justify-content: space-between; }
.cc-add { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.ccard2:hover .cc-add { opacity: 1; }
.cc-add:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: none) { .cc-add { opacity: .7; } }
.cc-prog { margin-top: 10px; }
.cc-bar { height: 5px; background: var(--bg-hover); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.cc-bar span { display: block; height: 100%; background: #4FB076; transition: width .4s; }
.cc-prog small { color: var(--text-faint); font-size: 11.5px; }
.cc-line { font-size: 12px; margin-top: 6px; color: var(--text-muted); }
.cc-line b { color: var(--text); }

/* KPIs compactos: números de UNA línea, sin desperdiciar espacio */
.kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.kpis .kpi { flex: 0 1 auto; min-width: 0; padding: 9px 14px; }
.kpis .kpi b { font-size: 17px; white-space: nowrap; }
.kpis .kpi small { white-space: nowrap; font-size: 11px; }

/* detalle de producción inline (acordeón estilo ledger) */
.pd-row td { padding: 0 6px 10px !important; border-bottom: 1px solid var(--border-soft); }
.pd-box { background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: 10px; padding: 6px 12px; animation: popIn .14s ease; }
.pd-sec { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 8px 2px 4px; text-transform: uppercase; letter-spacing: .03em; }
.pd-sec b { font-size: 13px; color: var(--text-strong); }
.pd-total { border-top: 1px dashed var(--border); margin-top: 4px; } .pd-total b { color: #E6D08A; }
.pd-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.pd-item:last-child { border-bottom: none; }
.pd-name { min-width: 0; } .pd-name small { display: block; color: var(--text-faint); font-size: 11.5px; margin-top: 1px; }
.pd-amt { white-space: nowrap; } .pd-amt.est { color: #E6D08A; }

/* Pagos: tamaños más grandes (legibilidad) */
.pagos-v .kpis .kpi { padding: 12px 18px; }
.pagos-v .kpis .kpi b { font-size: 22px; }
.pagos-v .kpis .kpi small { font-size: 12.5px; }
.pagos-v .ntable th { font-size: 12.5px; }
.pagos-v .ntable td { font-size: 15px; padding: 13px 9px; }
.pagos-v .callout { font-size: 15px; }
.pagos-v .btn.mini { font-size: 13.5px; padding: 7px 16px; }
.pagos-v .ghost-btn.mini { font-size: 13.5px; }
.pagos-v .ig-inp { font-size: 15px; width: 150px; }
.pagos-v .pd-item { font-size: 14.5px; } .pagos-v .pd-name small { font-size: 12.5px; }

/* MÓVIL: con el menú lateral abierto, el fondo NO se mueve — scrollea el menú */
@media (max-width: 700px) {
    body.sb-open { overflow: hidden; height: 100dvh; touch-action: none; }
    body.sb-open .main { overflow: hidden; pointer-events: none; }
    body.sb-open .sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; pointer-events: auto; }
    body.sb-open .sb-backdrop { pointer-events: auto; touch-action: none; }
    /* lo mismo para paneles flotantes: su scroll no arrastra el fondo */
    .notif-pop, .nmenu, #asis-panel .asis-msgs, .peek, .modal, .pub-sheet-scroll { overscroll-behavior: contain; }
    body.peek-open { touch-action: none; }
    body.peek-open .peek { touch-action: pan-y; }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  BETTER LEDGER — CAPA PROPIA (sobre el CSS del BTTR Hub)      ║
   ║  Todo lo de ARRIBA es el style.css del Hub, VERBATIM.         ║
   ║  Aquí: (1) alias de tokens legados → tokens Hub,              ║
   ║  (2) tema CLARO (Notion light; el Hub es dark-only),          ║
   ║  (3) componentes del Ledger (calendario contable, proyección, ║
   ║  factura, compras, chat IA, ⌘K…) con las clases del Hub.      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ---------- (1) ALIAS de tokens legados (valores = tokens Hub, dark) ---------- */
:root {
    --panel-bg: var(--bg-card);
    --side-bg: var(--bg-side);
    --callout: var(--bg-callout);
    --surface-2: rgba(255, 255, 255, .055);
    --surface-3: #383838;
    --text-primary: #EBEBEB;
    --text-secondary: #9B9B9B;
    --ink: #FFFFFF;
    --on-ink: #191919;
    --field-bg: var(--bg-input);
    --ring: rgba(82, 156, 202, .25);
    --header-font: var(--font);

    /* Héroe (tarjeta de caja): tarjeta oscura protagonista SIEMPRE */
    --hero-bg: #252525;
    --hero-fg: #FFFFFF;
    --hero-muted: #9B9B9B;
    --hero-border: rgba(255, 255, 255, .09);

    /* Semánticos (tinte translúcido + texto del tono, estilo Hub dark) */
    --inc-700: #6BBF8A;  --inc-500: #2B593F;  --inc-50: rgba(107,191,138,.13);
    --exp-700: #D98A8A;  --exp-500: #6E3630;  --exp-50: rgba(217,138,138,.12);
    --warn-700: #E9C46A; --warn-50: rgba(233,196,106,.12);
    --info-700: #529CCA; --info-50: rgba(82,156,202,.12);

    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px;
    --t-fast: 120ms ease; --t-med: 180ms ease;
    --radius-s: 5px; --radius-l: 10px;   /* --radius (6px) lo define el Hub */
    --shadow-1: 0 0 0 rgba(0,0,0,0);
    --shadow-2: 0 10px 30px rgba(0,0,0,.4);
    --shadow-3: 0 14px 40px rgba(0,0,0,.55);

    --done-in-bg: rgba(107,191,138,.08); --done-in-bd: #3B5A47; --done-in-fg: #7FA98D;
    --done-out-bg: rgba(255,255,255,.04); --done-out-bd: #4A4D53; --done-out-fg: #8A8D93;
}

/* ---------- (2) TEMA CLARO = Notion light (mismo layout, tokens invertidos) ---------- */
html:not([data-theme="dark"]) {
    --bg: #FFFFFF;
    --bg-side: #F7F7F5;
    --bg-hover: rgba(0, 0, 0, .045);
    --bg-callout: rgba(0, 0, 0, .03);
    --bg-card: #FFFFFF;
    --bg-input: #F7F7F5;
    --border: #E9E9E7;
    --border-soft: #F1F1EF;
    --text: #55534E;
    --text-strong: #37352F;
    --text-muted: #787774;
    --text-faint: #9B9A97;
    --accent: #2383E2;
    /* chips Notion light (pastel + texto del tono) */
    --tag-gray-bg: #E3E2E0;   --tag-gray-fg: #32302C;
    --tag-brown-bg: #EEE0DA;  --tag-brown-fg: #442A1E;
    --tag-orange-bg: #FADEC9; --tag-orange-fg: #49290E;
    --tag-yellow-bg: #FDECC8; --tag-yellow-fg: #402C1B;
    --tag-green-bg: #DBEDDB;  --tag-green-fg: #1C3829;
    --tag-blue-bg: #D3E5EF;   --tag-blue-fg: #183347;
    --tag-purple-bg: #E8DEEE; --tag-purple-fg: #412454;
    --tag-pink-bg: #F5E0E9;   --tag-pink-fg: #4C2337;
    --tag-red-bg: #FFE2DD;    --tag-red-fg: #5D1715;

    /* alias legados en claro */
    --panel-bg: #FFFFFF;
    --side-bg: #F7F7F5;
    --callout: rgba(0, 0, 0, .03);
    --surface-2: #F1F1EF;
    --surface-3: #E9E9E7;
    --text-primary: #37352F;
    --text-secondary: #6B6A66;
    --ink: #191919;
    --on-ink: #FFFFFF;
    --field-bg: #F7F7F5;
    --ring: rgba(35, 131, 226, .18);

    --hero-bg: #191919;
    --hero-fg: #FFFFFF;
    --hero-muted: #9B9B9B;
    --hero-border: #191919;

    --inc-700: #337051;  --inc-500: #448361;  --inc-50: #DBEDDB;
    --exp-700: #B04A44;  --exp-500: #D44C47;  --exp-50: #FFE2DD;
    --warn-700: #9A6700; --warn-50: #FDECC8;
    --info-700: #2E6D95; --info-50: #D3E5EF;

    --shadow-2: 0 4px 14px rgba(15,15,15,.06);
    --shadow-3: 0 14px 40px rgba(15,15,15,.14);

    --done-in-bg: #EDF6EE; --done-in-bd: #B4D4BF; --done-in-fg: #4F7C63;
    --done-out-bg: #F1F1EF; --done-out-bd: #CFCFCB; --done-out-fg: #87867F;
}
/* Fixes de colores fijos del Hub en claro */
html:not([data-theme="dark"]) .ws-logo,
html:not([data-theme="dark"]) .login-logo { color: #37352F; }
html:not([data-theme="dark"]) .h-bar::before,
html:not([data-theme="dark"]) .panel-title::before { background: #37352F; }
html:not([data-theme="dark"]) .btn.solid,
html:not([data-theme="dark"]) .btn-primary { background: #191919; color: #fff; border-color: #191919; }
html:not([data-theme="dark"]) .topbar { background: rgba(255,255,255,.85); }
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: #D3D1CB; }
html:not([data-theme="dark"]) .toast { background: #191919; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
html:not([data-theme="dark"]) .toast.err { background: #E5484D; color: #fff; }
html:not([data-theme="dark"]) .seg button.active { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
html:not([data-theme="dark"]) .nmenu,
html:not([data-theme="dark"]) .cell-date { background: #fff; }
html:not([data-theme="dark"]) .ntable tr:hover td { background: rgba(0,0,0,.02); }
html:not([data-theme="dark"]) .cal-cell.today .dnum { color: #191919; }
html:not([data-theme="dark"]) .stepper button:hover { color: #191919; }
html:not([data-theme="dark"]) .modal { box-shadow: 0 20px 60px rgba(15,15,15,.22); }

/* ---------- Cifras tabulares (montos alineados) ---------- */
body, input, select, button, table { font-variant-numeric: tabular-nums; }
/* Checkbox/radio nativos (la base del Hub les ponía fondo y padding de input) */
input[type="checkbox"], input[type="radio"] {
    width: 15px; height: 15px; padding: 0; background: none; border: none;
    box-shadow: none; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer;
}
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
body { transition: background-color .25s ease, color .25s ease; }

/* ---------- Shell: sidebar (wordmark + subtítulo) y topbar ---------- */
.ws-logo { line-height: 1.1; }
.ws-sub { display: block; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-top: 1px; }
.sb-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; }
.sb-ic svg { width: 17px; height: 17px; }
.sb-item { -webkit-tap-highlight-color: transparent; }
.tb-right .ghost-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.tb-right .ghost-btn svg { width: 16px; height: 16px; }
.tb-right .ghost-btn:disabled { opacity: .45; cursor: default; }
.kbd-hint { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-faint);
    background: var(--bg-hover); border: 1px solid var(--border-soft); border-radius: 4px; padding: 0 5px; }

/* Vistas (pestañas del Ledger) */
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .2s ease; }
.page-head { margin: 18px 0 6px; }
.page-sub { margin-bottom: 24px; }

/* ---------- Secciones planas estilo Notion (antes "paneles") ---------- */
.panel { margin: 0 0 34px; min-width: 0; }
.panel-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700; color: var(--text-strong);
    letter-spacing: 0; text-transform: none; margin: 0 0 12px;
}
.panel-title::before { content: ""; width: 3px; height: 18px; flex: 0 0 auto; background: #fff; border-radius: 2px; }
.hint { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.sub-cell { font-size: 11.5px; color: var(--text-faint); }
.text-muted { color: var(--text-muted); }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

/* ---------- Dashboard: héroe + KPIs (tarjetas .kpi/.gcard del Hub) ---------- */
.dashboard { display: flex; flex-direction: column; gap: 12px; }
.card {
    background: var(--bg-callout); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.card-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.card h2 { font-size: 38px; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; color: var(--text-strong); }
.card h3 { font-size: 22px; font-weight: 700; color: var(--text-strong); }
.card-sub { font-size: 11.5px; color: var(--text-faint); }
.card-inc h3 { color: var(--inc-700); }
.card-exp h3 { color: var(--exp-700); }
.card-warn h3 { color: var(--warn-700); }
.card-salud.salud-ok h3 { color: var(--inc-700); }
.card-salud.salud-warn h3 { color: var(--warn-700); }
.card-salud.salud-bad h3 { color: var(--exp-700); }
.kpi-delta { display: inline-block; margin-left: 4px; }
.delta { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.delta-good { color: var(--tag-green-fg); background: var(--tag-green-bg); }
.delta-bad { color: var(--tag-red-fg); background: var(--tag-red-bg); }

/* Héroe: tarjeta OSCURA (tarjeta BTTR) en ambos temas */
.balance-card {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
    background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 10px;
    padding: 24px 28px; color: var(--hero-fg); overflow: hidden;
}
.balance-card .card-label { color: var(--hero-muted); }
.balance-card h2 { color: var(--hero-fg); }
.balance-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.balance-eq { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.beq { display: flex; flex-direction: column; gap: 3px; text-align: right; }
.beq-k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--hero-muted); font-weight: 600; }
.beq-v { font-size: 18px; font-weight: 700; }
.beq-v.inc { color: #6BBF8A; }
.beq-v.exp { color: #D98A8A; }
.beq-op { font-size: 22px; color: #6E6E6E; font-weight: 300; }
.trend-pill {
    display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
    color: #6BBF8A; background: rgba(107,191,138,.12); border: 1px solid rgba(107,191,138,.28);
    padding: 6px 12px; border-radius: 16px; white-space: nowrap;
}
.trend-pill.neg { color: #D98A8A; background: rgba(217,138,138,.12); border-color: rgba(217,138,138,.3); }
.trend-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.balance-card .info { background: rgba(255,255,255,.14); color: #d9d9de; }

/* Metas del mes */
.metas-panel { background: var(--bg-callout); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.meta-block { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.meta-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.meta-head span { font-size: 12.5px; font-weight: 600; color: var(--text); }
.meta-head strong { font-size: 12.5px; color: var(--text-strong); }
.meta-bar { height: 8px; background: var(--bg-hover); border-radius: 10px; overflow: hidden; }
.meta-fill { height: 100%; border-radius: 10px; background: var(--accent); transition: width .4s ease; }
.meta-fill.mb-ok { background: #4FB076; }
.meta-fill.mb-inv { background: #E0B44F; }
.meta-fill.mb-bad { background: #C56B63; }

/* Aviso de igualas = callout ⚡ del Hub con tinte ámbar */
.banner-aviso {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: rgba(224,180,79,.09); border: 1px solid rgba(224,180,79,.3);
    border-radius: 6px; color: var(--text); padding: 12px 16px; font-size: 13.5px; margin-bottom: 14px;
}
.banner-btn { margin-left: auto; white-space: nowrap; }

/* Tooltip de info */
.info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--bg-hover); color: var(--text-muted); font-size: 10px; font-weight: 700;
    font-style: italic; font-family: Georgia, serif; cursor: help;
    vertical-align: middle; position: relative; margin-left: 3px; user-select: none;
}
.info:hover { background: var(--ink); color: var(--on-ink); }
.info::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 250px; background: #111; color: #fff; font-size: 12px; font-weight: 400;
    font-style: normal; font-family: var(--font); line-height: 1.45; letter-spacing: 0;
    text-transform: none; text-align: left; padding: 10px 12px; border-radius: 8px;
    opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 50;
    box-shadow: var(--shadow-3); pointer-events: none;
}
.info::before {
    content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #111;
    opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 50;
}
.info:hover::after, .info:hover::before { opacity: 1; visibility: visible; }

.usd-strip { display: flex; gap: 24px; flex-wrap: wrap; border: 1px dashed var(--border);
    border-radius: 8px; padding: 11px 16px; font-size: 13px; color: var(--text); margin-bottom: 14px; }
.usd-strip strong { color: var(--text-strong); }

/* ---------- Botonería legada → estilo Hub ---------- */
.btn-primary { background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); font-weight: 600; border-radius: 6px; }
.btn-primary:hover { background: var(--ink); opacity: .88; }
.btn.btn-primary:hover { background: var(--ink); opacity: .88; }
.btn-secondary { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-strong); font-weight: 500; }
.btn-secondary:hover { background: var(--bg-hover); }
a.btn { text-decoration: none; display: inline-block; text-align: center; }
.btn-link {
    background: none; border: none; cursor: pointer; font-family: var(--font);
    font-size: 13px; font-weight: 500; color: var(--text-muted);
    padding: 4px 8px; border-radius: 5px; align-self: flex-start; text-decoration: none;
}
.btn-link:hover { background: var(--bg-hover); color: var(--text-strong); }
.btn-delete, .btn-download {
    background: transparent; border: none; cursor: pointer; font-family: var(--font);
    color: var(--text-muted); font-size: 12px; font-weight: 500; border-radius: 5px; padding: 3px 8px;
}
.btn-delete:hover { background: var(--bg-hover); color: #d98a8a; }
.btn-download { color: var(--accent); }
.btn-download:hover { background: var(--bg-hover); }
.btn-cobrar {
    font-size: 11px; font-weight: 600; background: var(--ink); color: var(--on-ink);
    border: none; padding: 6px 11px; cursor: pointer; white-space: nowrap; border-radius: 6px; font-family: var(--font);
}
.btn-cobrar:hover { opacity: .85; }

/* ---------- Formularios (inputs = base del Hub) ---------- */
.better-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-group label, .modal-box label { display: block; font-size: 12px; color: var(--text-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.block-label { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-faint); margin-top: 6px; }
.better-form input:not([type="checkbox"]):not([type="radio"]),
.better-form select, .better-form textarea, .modal-input { width: 100%; }
.better-form textarea { resize: vertical; min-height: 44px; }
.better-form-inline { display: flex; gap: 8px; margin-top: 12px; }
.better-form-inline input { flex: 1; min-width: 0; }
.radio-group { display: flex; gap: 18px; margin-top: 2px; }
.radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 400; color: var(--text); }
.radio-label input { accent-color: var(--accent); }
input[type="file"] {
    font-size: 11px; color: var(--text-muted);
    border: 1px dashed var(--border); border-radius: 6px; padding: 7px; background: var(--bg-input);
    width: 100%; cursor: pointer;
}
input[type="file"]::file-selector-button {
    font-family: var(--font); font-size: 11px; font-weight: 600;
    background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
    border-radius: 5px; padding: 3px 9px; margin-right: 8px; cursor: pointer;
}

/* Form horizontal (Movimientos / Fijos / Compras) */
.better-form.form-horizontal { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.form-horizontal .form-group { flex: 1 1 150px; min-width: 120px; }
.form-horizontal .fg-tipo { flex: 0 0 auto; }
.form-horizontal .fg-sm { flex: 0 1 115px; }
.form-horizontal .fg-lg { flex: 2 1 240px; }
.form-horizontal .fg-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.form-horizontal .radio-group { height: 34px; display: flex; align-items: center; margin: 0; gap: 16px; }

/* Filtros del historial (estilo .fbar del Hub) */
.hist-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.hist-filtros input[type="text"] { flex: 1 1 280px; min-width: 180px; font-size: 13px; }
.hist-filtros select { font-size: 13px; }
.hist-filtros #hist-count { margin-left: auto; white-space: nowrap; }

/* Chips de etiquetas #tag */
.hist-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hist-tags:empty { margin-bottom: 0; }
.tag-chip {
    font-size: 12px; font-weight: 500; padding: 3px 11px; cursor: pointer; font-family: var(--font);
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 14px; transition: all var(--t-fast);
}
.tag-chip:hover { color: var(--text-strong); background: var(--bg-hover); }
.tag-chip.tag-on { border-color: var(--accent); color: var(--accent); background: rgba(82,156,202,.10); font-weight: 600; }
.tag-chip.tag-clear { color: #d98a8a; border-color: var(--tag-red-bg); }
.tag-chip.tag-mini { font-size: 10.5px; padding: 1px 8px; }
.adj-link { text-decoration: none; font-size: 13px; margin-left: 4px; }
.adj-link:hover { opacity: .7; }

/* ---------- Tablas = .ntable del Hub ---------- */
.table-container { width: 100%; overflow-x: auto; border-top: 1px solid var(--border); }
.better-table { width: 100%; border-collapse: collapse; }
.better-table th {
    text-align: left; font-weight: 500; color: var(--text-faint); font-size: 13px;
    padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
    letter-spacing: 0; text-transform: none;
}
.better-table td {
    padding: 8px 10px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft);
    font-size: 14px; color: var(--text); vertical-align: middle;
}
.better-table td:last-child { border-right: none; }
.better-table tr:hover td { background: rgba(255,255,255,.025); }
html:not([data-theme="dark"]) .better-table tr:hover td { background: rgba(0,0,0,.02); }

/* Chips de estado / tipo = tags Notion del Hub */
.badge-ingreso, .badge-egreso, .badge-cotiz, .estado-chip, .omit-badge {
    display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px;
    white-space: nowrap; line-height: 1.5; font-weight: 500; letter-spacing: 0; text-transform: none;
    border: none; font-family: var(--font);
}
.badge-ingreso { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.badge-egreso { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.badge-cotiz { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.estado-chip { cursor: pointer; }
.estado-cobrado { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.estado-pendiente { background: var(--tag-yellow-bg); color: var(--tag-yellow-fg); }
.omit-badge { background: var(--tag-yellow-bg); color: var(--tag-yellow-fg); font-size: 10.5px; }
.tx-amount { font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
.amount-ingreso { color: var(--inc-700); }
.amount-egreso { color: var(--exp-700); }
.chip-env {
    font-size: 11px; font-weight: 500; padding: 1px 8px; margin-top: 4px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 4px; background: transparent;
    color: var(--text-faint); font-family: var(--font);
}
.chip-env:hover { color: var(--text); background: var(--bg-hover); }
.chip-env.env-on { background: var(--tag-green-bg); color: var(--tag-green-fg); border-color: transparent; }
.cli-link {
    background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font);
    font-size: inherit; color: inherit; text-decoration: underline;
    text-decoration-color: transparent; text-underline-offset: 3px;
}
.cli-link:hover { color: var(--text-strong); text-decoration-color: var(--text-faint); }

/* Paginador (= .pgn del Hub) */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 4px; }
.pager-btn { background: none; border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-muted); font: 12px/1 var(--font); padding: 6px 12px; cursor: pointer; }
.pager-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-strong); }
.pager-btn:disabled { opacity: .35; cursor: default; }
.pager-info { color: var(--text-faint); font-size: 12px; white-space: nowrap; }

/* Control segmentado (= .seg del Hub) */
.seg-head.seg-pill { display: inline-flex; gap: 2px; background: var(--bg-hover); border-radius: 6px; padding: 2px; margin-bottom: 0; }
.seg-pill .seg-btn { border: none; background: transparent; color: var(--text-muted); padding: 4px 12px;
    border-radius: 5px; cursor: pointer; font-size: 13px; font-family: var(--font); }
.seg-pill .seg-btn:hover { color: var(--text-strong); }
.seg-pill .seg-btn.active { background: var(--bg-card); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.seg-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg-toggle .seg-btn { flex: 1; padding: 9px 10px; background: var(--bg-card); border: none; border-right: 1px solid var(--border);
    cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-muted); font-family: var(--font); }
.seg-toggle .seg-btn:last-child { border-right: none; }
.seg-toggle .seg-btn:hover { background: var(--bg-hover); }
.seg-toggle .seg-btn.active { background: var(--ink); color: var(--on-ink); }

/* ---------- Layout 2 columnas (Facturas / Ajustes) ---------- */
.layout-2col { display: grid; grid-template-columns: 400px 1fr; gap: 34px; align-items: start; }
.layout-2col.form-right { grid-template-columns: minmax(0,1fr) 400px; }
.layout-2col.form-right .col-side { order: 2; }
.layout-2col.form-right .content-body { order: 1; }
.col-side, .content-body { display: flex; flex-direction: column; min-width: 0; }

/* ---------- Facturas: items, catálogo, vista previa ---------- */
.item-row { display: grid; grid-template-columns: 1fr 110px 28px; gap: 8px; margin-bottom: 8px; align-items: start; }
.pago-row { grid-template-columns: 130px 1fr 110px 28px; }
.item-row input, .item-row select { width: 100%; font-size: 13px; }
.it-name-wrap { position: relative; }
.it-name-wrap .it-nombre { width: 100%; }
.serv-dd { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: var(--bg-card);
    border: 1px solid var(--border); box-shadow: var(--shadow-3); max-height: 240px; overflow-y: auto; margin-top: 4px; border-radius: 8px; }
.serv-dd-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--border-soft); }
.serv-dd-item:last-child { border-bottom: none; }
.serv-dd-item:hover { background: var(--bg-hover); }
.serv-dd-item .sdi-n { font-size: 13px; font-weight: 500; color: var(--text-strong); }
.serv-dd-item .sdi-p { font-size: 11.5px; color: var(--text-faint); }
.serv-dd-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text-faint); }
.cuenta-row { display: grid; grid-template-columns: 1fr 1.4fr 28px; gap: 8px; margin-bottom: 8px; align-items: center; }
.item-del { background: none; border: 1px solid var(--border); cursor: pointer; color: var(--text-muted);
    font-weight: 600; height: 32px; border-radius: 6px; }
.item-del:hover { color: #d98a8a; border-color: #d98a8a; }
.item-row .item-sub { grid-column: 1 / 3; }
.fac-registro-box { background: rgba(82,156,202,.07); border: 1px solid rgba(82,156,202,.3); border-radius: 6px; padding: 12px 14px; margin: 8px 0; }
.fac-total-preview { font-weight: 600; font-size: 14px; color: var(--text-strong); padding: 12px 2px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prev-row { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 400; padding: 3px 0; color: var(--text); }
.prev-row span:last-child { font-weight: 600; color: var(--text-strong); }
.prev-neto { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; font-size: 14px; }
.fac-preview-img { width: 100%; border: 1px solid var(--border); margin-top: 12px; border-radius: 6px; }
.fac-msg { font-size: 13px; margin-top: 6px; }
.fac-msg.ok { color: var(--inc-700); font-weight: 600; }
.fac-msg.err { color: var(--exp-700); font-weight: 600; }
.pages-ok { font-size: 13px; font-weight: 600; color: var(--inc-700); padding: 8px 0; }
.pages-bad { font-size: 13px; font-weight: 600; color: var(--exp-700); padding: 8px 0; }

/* Vista previa EN VIVO — SIEMPRE papel BLANCO (aun en oscuro) */
.inv-paper { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 28px 30px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: #333; line-height: 1.4; }
.ip-head { display: flex; justify-content: space-between; align-items: flex-start; }
.ip-emisor { font-weight: 700; font-size: 12px; color: #000; }
.ip-det { font-size: 9px; color: #666; margin: 2px 0 12px; line-height: 1.3; }
.ip-title { font-size: 26px; font-weight: 700; color: #000; }
.ip-no { font-size: 10px; color: #333; }
.ip-fecha { font-size: 10px; color: #666; white-space: nowrap; }
.ip-fact { margin: 14px 0; }
.ip-lbl { font-size: 10px; font-weight: 700; color: #000; text-transform: uppercase; margin-bottom: 4px; letter-spacing: .04em; }
.ip-cli { font-weight: 700; color: #000; font-size: 11px; }
.ip-cdet { font-size: 10px; color: #666; }
.ip-servhead { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: #000;
    border-bottom: 1.5px solid #000; padding-bottom: 6px; margin-top: 10px; }
.ip-srow { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; }
.ip-srow > div:first-child { color: #000; }
.ip-ssub { font-size: 9px; color: #888; margin-top: 2px; }
.ip-simp { white-space: nowrap; color: #000; }
.ip-totwrap { margin-top: 8px; }
.ip-trow { display: flex; justify-content: flex-end; gap: 18px; font-size: 10px; padding: 2px 0; color: #333; }
.ip-trow span:last-child { white-space: nowrap; min-width: 92px; text-align: right; font-weight: 700; color: #000; }
.ip-tbold { font-weight: 700; font-size: 13px; color: #000; border-top: 1.5px solid #000; margin-top: 4px; padding-top: 8px; }
.ip-pay { display: flex; gap: 24px; margin-top: 18px; }
.ip-pay > div { flex: 1; }
.ip-bank { font-weight: 700; color: #000; font-size: 10px; margin-top: 5px; }
.ip-pay p { font-size: 10px; color: #666; margin: 4px 0; }

/* ---------- Proyección ---------- */
.proy-nav, .cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.proy-nav-lbl { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.cal-nav-lbl { font-size: 15px; font-weight: 700; color: var(--text-strong); min-width: 140px; }
.proy-nav .btn-link, .cal-nav .btn-link { border: 1px solid var(--border); background: var(--bg-card); border-radius: 6px;
    padding: 5px 12px; color: var(--text); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
.proy-nav .btn-link:hover, .cal-nav .btn-link:hover { background: var(--bg-hover); color: var(--text-strong); }
.proy-nav .btn-link:disabled, .cal-nav .btn-link:disabled { opacity: .35; cursor: default; background: transparent; }
.proy-2col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; align-items: start; }
.proy-col-title { font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 8px;
    padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.proy-block { display: flex; gap: 24px; align-items: center; margin-bottom: 10px; }
.proy-cur { font-weight: 700; font-size: 20px; min-width: 60px; color: var(--text-muted); }
.proy-lines { flex: 1; max-width: 640px; min-width: 0; }
.proy-line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 7px 0;
    border-bottom: 1px solid var(--border-soft); color: var(--text); }
.proy-line span:last-child { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.proy-sub { color: var(--text-strong); font-weight: 600; }
.proy-recibido, .proy-recibido span:last-child { color: #7FA98D; }
.proy-pagado, .proy-pagado span:last-child { color: #C98A8A; }
html:not([data-theme="dark"]) .proy-recibido, html:not([data-theme="dark"]) .proy-recibido span:last-child { color: #5f8a6e; }
html:not([data-theme="dark"]) .proy-pagado, html:not([data-theme="dark"]) .proy-pagado span:last-child { color: #b06a6a; }
.proy-neto { border-bottom: none; border-top: 1px solid var(--text-strong); margin-top: 4px; padding-top: 12px;
    font-weight: 700; font-size: 15px; color: var(--text-strong); }
.proy-neto span:last-child { font-size: 19px; }
.proy-click { cursor: pointer; border-radius: 5px; }
.proy-click:hover { background: var(--bg-hover); }
.proy-detalle { margin: 4px 0 10px 8px; border-left: 2px solid var(--border); padding: 3px 10px 3px 12px;
    background: var(--bg-callout); border-radius: 0 8px 8px 0; max-width: 100%; animation: fadeIn .16s ease-out; }
.proy-detalle-row { display: flex; justify-content: space-between; gap: 14px; align-items: center;
    font-size: 12.5px; padding: 7px 0; color: var(--text); border-bottom: 1px solid var(--border-soft); }
.proy-detalle-row:last-child { border-bottom: none; }
.proy-detalle-row > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proy-detalle-row > span:last-child { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.proy-omitido span:first-child { color: var(--text-faint); }
.proy-omitido .proy-amt { text-decoration: line-through; color: var(--text-faint); }
.proy-add { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer;
    font-weight: 600; font-size: 12px; line-height: 1; width: 19px; height: 19px; border-radius: 5px; padding: 0; vertical-align: middle; }
.proy-add:hover { background: var(--bg-hover); color: var(--text-strong); }
.btn-mover { font-size: 10px; font-weight: 600; background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer; padding: 2px 7px; margin-left: 8px; white-space: nowrap; border-radius: 5px; font-family: var(--font); }
.btn-mover:hover { background: var(--bg-hover); color: var(--text-strong); }
.opts-wrap { position: relative; display: inline-block; margin-left: 8px; }
.btn-opts { background: transparent; border: none; color: var(--text-faint); cursor: pointer; padding: 0 7px;
    font-weight: 700; font-size: 14px; line-height: 1.5; border-radius: 5px; }
.btn-opts:hover { background: var(--bg-hover); color: var(--text-strong); }

/* Menús flotantes (⋯ / calendario) = .nmenu del Hub */
.opts-menu, .cal-ctx {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0,0,0,.55); padding: 5px; overflow: hidden; z-index: 600;
}
html:not([data-theme="dark"]) .opts-menu, html:not([data-theme="dark"]) .cal-ctx { box-shadow: 0 14px 40px rgba(15,15,15,.18); }
.opts-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; min-width: 200px; }
.opts-menu button, .cal-ctx button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none;
    border-radius: 5px; padding: 7px 9px; font-size: 13.5px; font-family: var(--font); cursor: pointer; color: var(--text);
}
.opts-menu button:hover, .cal-ctx button:hover { background: var(--bg-hover); }
.opts-menu .opt-del { color: #d98a8a; }
.cal-ctx { position: fixed; z-index: 650; min-width: 200px; }
.cal-ctx button:first-child { color: var(--inc-700); }
.cal-ctx button:last-child { color: var(--exp-700); }
.cal-evt-menu { position: fixed; right: auto; top: auto; z-index: 650; min-width: 230px; }
.opts-menu:not(.hidden), .cal-ctx:not(.hidden), .cal-evt-menu:not(.hidden) { animation: popIn .13s ease; }

/* ---------- Desglose ---------- */
.dg-cur-title { font-weight: 700; font-size: 17px; color: var(--text-muted); margin-bottom: 12px; }
.dg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.dg-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-strong);
    padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.dg-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 7px 0;
    border-bottom: 1px solid var(--border-soft); color: var(--text); }
.dg-row span:last-child { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.dg-balance { margin-top: 14px; font-size: 14px; text-align: right; color: var(--text); }
.dg-sep { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* ---------- Estadísticas ---------- */
.stats-toolbar { display: flex; flex-direction: column; gap: 12px; }
.sf-row { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.sf-group { display: flex; align-items: center; gap: 10px; }
.sf-cap { font-size: 11.5px; font-weight: 600; color: var(--text-faint); white-space: nowrap; }
.sf-custom { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.sf-label { font-size: 12.5px; color: var(--text-faint); margin: 0; }
.stats-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi-box { background: var(--bg-callout); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-box .kpi-l { font-size: 12px; color: var(--text-muted); }
.kpi-box .kpi-v { font-size: 21px; font-weight: 700; color: var(--text-strong); }
.kpi-box .kpi-s { font-size: 11.5px; color: var(--text-faint); }
.kpi-box.inc .kpi-v { color: var(--inc-700); }
.kpi-box.exp .kpi-v { color: var(--exp-700); }
.stats-rank { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.rank-title { font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 12px; }
.rk-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; border-radius: 6px; padding: 2px 4px; }
.rk-row.rk-click { cursor: pointer; }
.rk-row.rk-click:hover { background: var(--bg-hover); }
.rk-name { flex: 0 0 128px; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-bar { flex: 1; height: 12px; background: var(--bg-hover); border-radius: 6px; overflow: hidden; }
.rk-fill { height: 100%; border-radius: 6px; transition: width .5s; }
.rk-val { flex: 0 0 auto; font-weight: 600; font-size: 12.5px; color: var(--text-strong); white-space: nowrap; min-width: 88px; text-align: right; }

/* Aging (antigüedad por cobrar) */
.aging-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.aging-box { background: var(--bg-callout); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aging-box.ag-click { cursor: pointer; }
.aging-box.ag-click:hover { background: var(--bg-hover); }
.aging-box .ag-l { font-size: 12px; color: var(--text-muted); }
.aging-box .ag-v { font-size: 19px; font-weight: 700; color: var(--text-strong); }
.aging-box .ag-n { font-size: 11.5px; color: var(--accent); font-weight: 500; }
.aging-box.ag-ok .ag-v { color: var(--inc-700); }
.aging-box.ag-w1 .ag-v { color: var(--warn-700); }
.aging-box.ag-w2 .ag-v { color: #E0A272; }
html:not([data-theme="dark"]) .aging-box.ag-w2 .ag-v { color: #A85A0A; }
.aging-box.ag-bad .ag-v { color: var(--exp-700); }

.cierre-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.charts-container { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.chart-wrapper { position: relative; width: 100%; height: 260px; }

/* ---------- Calendario contable (grid hairline estilo Hub) ---------- */
.cal-tot { margin-left: auto; display: flex; gap: 16px; font-size: 12.5px; font-weight: 600; }
.cal-tot-in { color: var(--inc-700); }
.cal-tot-out { color: var(--exp-700); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0;
    border-left: 1px solid var(--border-soft); border-top: 1px solid var(--border-soft); }
.cal-dows { margin-bottom: 0; border-bottom: none; }
.cal-dow { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-faint);
    text-align: center; padding: 6px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.cal-cell { min-height: 96px; border: none; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
    border-radius: 0; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; background: transparent;
    font-size: 12px; color: var(--text-muted); cursor: default; }
.cal-cell:hover { background: rgba(255,255,255,.02); }
html:not([data-theme="dark"]) .cal-cell:hover { background: rgba(0,0,0,.02); }
.cal-empty { background: transparent; }
.cal-out-month { background: transparent; cursor: pointer; }
.cal-out-month .cal-daynum { color: var(--text-faint); opacity: .5; }
.cal-daynum { font-size: 12px; font-weight: 400; color: var(--text-muted); text-align: right; }
.cal-hoy-cell { box-shadow: none; border-color: var(--border-soft); }
.cal-hoy-cell .cal-daynum { color: #fff; }
.cal-hoy-cell .cal-daynum b, .cal-hoy-cell .cal-daynum { font-weight: 600; }
.cal-hoy-cell .cal-daynum { align-self: flex-end; background: #EB5757; border-radius: 50%; padding: 1px 6px; }
.cal-evs { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-chip { text-align: left; border: 1px solid var(--border-soft); cursor: pointer; padding: 2px 6px;
    font-size: 11.5px; line-height: 1.25; border-left: 3px solid; border-radius: 4px;
    display: flex; flex-direction: column; gap: 1px; width: 100%; background: var(--bg-card); font-family: var(--font); }
.cal-chip:hover { filter: brightness(1.08); }
html:not([data-theme="dark"]) .cal-chip:hover { filter: brightness(.97); }
.cal-chip[draggable="true"] { cursor: grab; }
.cal-chip.dragging { opacity: .35; cursor: grabbing; }
.cal-cell.drag-over { background: rgba(82,156,202,.10); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-cell[data-dia]:hover { background: var(--bg-hover); }
.cal-in { background: var(--inc-50); border-color: transparent; border-left-color: var(--inc-700); color: var(--inc-700); }
.cal-out { background: var(--exp-50); border-color: transparent; border-left-color: var(--exp-700); color: var(--exp-700); }
.cal-done-in { background: var(--done-in-bg); border-color: transparent; border-left-color: var(--done-in-bd); color: var(--done-in-fg); }
.cal-done-out { background: var(--done-out-bg); border-color: transparent; border-left-color: var(--done-out-bd); color: var(--done-out-fg); }
.cal-done-in:hover, .cal-done-out:hover { filter: none; }
.cal-chip-t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip-amt { font-weight: 600; font-size: 10.5px; }
.cal-legend { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }
.cal-legend .cdot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.cdot-in { background: var(--inc-700); }
.cdot-out { background: var(--exp-700); }
.cdot-done { background: var(--done-out-bd); }
.cal-day-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--bg-card);
    border: 1px solid var(--border-soft); border-left: 3px solid var(--border); border-radius: 8px;
    padding: 10px 12px; margin-bottom: 7px; cursor: pointer; font-family: var(--font); color: var(--text); }
.cal-day-row.cal-in { border-left-color: var(--inc-700); background: var(--bg-card); color: var(--text); }
.cal-day-row.cal-out { border-left-color: var(--exp-700); background: var(--bg-card); color: var(--text); }
.cal-day-row:hover { background: var(--bg-hover); }
.cal-day-row .cdr-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-day-row .cdr-txt b { font-size: 14px; color: var(--text-strong); }
.cal-day-row .cdr-txt small { font-size: 11.5px; color: var(--text-faint); }
.cal-day-row .cdr-tap { color: var(--text-faint) !important; font-style: italic; }
.cal-day-row .cdr-amt { font-weight: 600; white-space: nowrap; font-size: 14px; }
.cal-day-row.cal-in .cdr-amt { color: var(--inc-700); }
.cal-day-row.cal-out .cdr-amt { color: var(--exp-700); }

/* ---------- Compras ---------- */
.compras-snapshot { margin-top: 4px; }
.snap-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.snap-chip { background: var(--bg-callout); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.snap-chip span { font-size: 12px; color: var(--text-muted); }
.snap-chip strong { font-size: 18px; color: var(--text-strong); }
.snap-chip.pos strong { color: var(--inc-700); }
.snap-chip.neg strong { color: var(--exp-700); }
.ahorro-panel, .colchon-cfg, .ahorro-box { margin-top: 14px; background: var(--bg-callout);
    border: 1px solid var(--border-soft); border-radius: 8px; padding: 16px 18px; }
.ahorro-title, .cc-head { font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 10px; }
.ahorro-kicker { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.ahorro-head { display: flex; flex-direction: column; gap: 2px; }
.ahorro-main { font-size: 30px; line-height: 1.05; color: var(--text-strong); }
.ahorro-sub { font-size: 12.5px; color: var(--text-muted); }
.aline { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0;
    border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.aline > span { color: var(--text); display: inline-flex; align-items: center; }
.aline > strong { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.aline-total { border-bottom: none; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; font-weight: 600; }
.aline-total > span { color: var(--text-strong); font-weight: 600; }
.aline-total > strong { font-size: 21px; }
.ahorro-tiers-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.ahorro-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.atier { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px;
    cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.atier:hover { background: var(--bg-hover); }
.atier span { font-size: 11.5px; color: var(--text-muted); }
.atier strong { font-size: 18px; color: var(--text-strong); }
.atier em { font-size: 11.5px; color: var(--text-faint); font-style: normal; }
.atier-rec { border-color: var(--accent); }
.tchip { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 3px 10px;
    font-size: 12px; font-weight: 500; cursor: pointer; margin-left: 4px; border-radius: 14px; font-family: var(--font); }
.tchip:hover { background: var(--bg-hover); }
.tchip-rec { border-color: var(--accent); color: var(--accent); }
.link-mini { background: none; border: none; color: var(--accent); font-size: 11.5px; cursor: pointer; text-decoration: underline; padding: 0 0 0 4px; }
.cc-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.cc-row label { font-size: 12.5px; font-weight: 500; color: var(--text); }
.cc-row input { width: 90px; }
.cc-sub { font-size: 12px; font-weight: 600; color: var(--text-faint); margin-top: 14px; }
.colchon-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; margin-top: 8px; }
.colchon-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; color: var(--text); }
.colchon-item span { flex: 1; }
.colchon-item em { color: var(--text-faint); font-style: normal; font-size: 12px; }
.cc-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.ahorro-break { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.ab-line { font-size: 13px; color: var(--text); }
.compras-list { display: flex; flex-direction: column; gap: 10px; }
.compra-card { background: var(--bg-callout); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-faint);
    border-radius: 8px; padding: 14px 16px; }
.compra-card.prio-alta { border-left-color: #C56B63; }
.compra-card.prio-media { border-left-color: var(--accent); }
.compra-card.prio-baja { border-left-color: var(--text-faint); }
.compra-card.estado-comprado, .compra-card.estado-descartado { opacity: .55; border-left-color: var(--border); }
.compra-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.compra-id h4 { font-size: 16px; margin: 0 0 3px; color: var(--text-strong); }
.compra-meta { font-size: 13px; color: var(--text-muted); }
.prio-tag { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.prio-tag.prio-alta { color: #E08F8F; }
html:not([data-theme="dark"]) .prio-tag.prio-alta { color: #D44C47; }
.compra-acciones { display: flex; gap: 6px; align-items: center; white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; }
.reco { margin-top: 12px; padding: 11px 14px; font-size: 13.5px; line-height: 1.5; border: 1px solid; border-radius: 6px; }
.reco-ok { background: rgba(107,191,138,.10); border-color: #3B5A47; color: #A7D8BB; }
.reco-warn { background: rgba(233,196,106,.10); border-color: #6B5A2C; color: #E9C46A; }
.reco-bad { background: rgba(217,138,138,.10); border-color: #6E3630; color: #E5A0A0; }
html:not([data-theme="dark"]) .reco-ok { background: #DBEDDB; border-color: #B4D4BF; color: #1C3829; }
html:not([data-theme="dark"]) .reco-warn { background: #FDECC8; border-color: #E4CD9B; color: #402C1B; }
html:not([data-theme="dark"]) .reco-bad { background: #FFE2DD; border-color: #F0BCB4; color: #5D1715; }
.reco-plan { margin-top: 8px; font-size: 12.5px; color: var(--text); background: var(--bg-card); padding: 7px 10px; border-radius: 6px; }
.compra-prog { margin-top: 12px; }
.cp-bar { height: 8px; background: var(--bg-hover); border-radius: 10px; overflow: hidden; }
.cp-fill { height: 100%; background: #4FB076; border-radius: 10px; transition: width .3s; }
.cp-prog-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 7px; flex-wrap: wrap; }
.cp-prog-txt { font-size: 12.5px; color: var(--text-muted); }
.cp-abonar { display: flex; gap: 6px; align-items: center; }
.cp-abono-input { width: 130px; font-size: 13px; }

/* ---------- Colaboradores / catálogo ---------- */
.empleados-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.empleado-item { display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border-soft); padding: 7px 6px; border-radius: 5px; }
.empleado-item:hover { background: var(--bg-hover); }
.emp-actions { display: flex; gap: 8px; opacity: 0; transition: opacity var(--t-med); white-space: nowrap; }
.empleado-item:hover .emp-actions { opacity: 1; }
.emp-info h4 { font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
.emp-info p { font-size: 12px; color: var(--text-faint); }

/* ---------- Notificaciones legadas (listas por cobrar) ---------- */
.notif-item { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--border-soft); margin-bottom: 8px; border-radius: 6px; }
.notif-item.notif-alert { border-color: var(--tag-red-bg); background: var(--exp-50); }
.notif-amt { font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--text-strong); }
.notif-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.notif-total { margin-top: 10px; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--border); }
.notif-subsub { font-size: 12px; font-weight: 600; color: var(--text-strong); margin: 10px 0 6px; }

/* ---------- Toasts (contenedor legado .toast-wrap = .toasts del Hub) ---------- */
.toast-wrap { position: fixed; bottom: 18px; right: 18px; z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 380px; transition: opacity .2s, transform .2s; }

/* ---------- Modales (= .modal del Hub) ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 400;
    display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .16s ease; }
.modal-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    width: 460px; max-width: 100%; max-height: 90vh; overflow-y: auto; padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55); animation: popIn .18s cubic-bezier(.22,.61,.36,1); }
.modal-box.modal-wide { width: 680px; }
.modal-box .panel-title { font-size: 17px; margin-bottom: 14px; }
.modal-box .panel-title::before { display: none; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 16px; }
.pago-diff { font-size: 13px; font-weight: 600; min-height: 18px; color: var(--text); }

/* DESHACER — historial */
.undo-list { max-height: 52vh; overflow-y: auto; margin: 4px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.undo-empty { color: var(--text-faint); font-size: 13.5px; text-align: center; padding: 24px 8px; }
.undo-row { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid var(--border-soft);
    border-radius: 8px; background: var(--bg-callout); }
.undo-row-info { flex: 1; min-width: 0; }
.undo-row-act { font-size: 13.5px; font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-row-when { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.btn-undo-item { flex: 0 0 auto; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--tag-red-bg);
    background: transparent; color: #d98a8a; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: var(--font); }
.btn-undo-item:hover { background: rgba(217,138,138,.12); }
.btn-undo-item:disabled { opacity: .5; cursor: default; }
html:not([data-theme="dark"]) .btn-undo-item { color: #D44C47; }
.undo-what { border: 1px solid var(--tag-red-bg); background: var(--exp-50); padding: 12px 14px; margin-top: 12px; border-radius: 8px; }
.undo-what-lbl { font-size: 11px; font-weight: 600; color: var(--exp-700); }
.undo-what-action { font-size: 14.5px; font-weight: 600; color: var(--text-strong); margin-top: 5px; line-height: 1.35; }
.undo-what-when { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }

/* Ficha de cliente (mini-CRM) */
.fc-chips { margin-bottom: 4px; }
.fc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 18px; }
.fc-sub { font-size: 12px; font-weight: 600; color: var(--text-faint); margin-bottom: 10px;
    border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; }
.fc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px;
    padding: 7px 0; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.fc-row:last-child { border-bottom: none; }
.fc-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fc-row strong { white-space: nowrap; color: var(--text-strong); }
.fc-row-aging { border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.fc-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- ⌘K búsqueda global ---------- */
.cmdk-overlay { position: fixed; inset: 0; z-index: 700; background: rgba(0,0,0,.5);
    display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; animation: fadeIn .14s ease; }
.cmdk-box { width: 620px; max-width: 100%; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.55); overflow: hidden; animation: popIn .16s ease; }
.cmdk-input-wrap { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.cmdk-input-wrap svg { width: 17px; height: 17px; color: var(--text-faint); flex: 0 0 auto; }
.cmdk-input-wrap input { flex: 1; border: none; outline: none; background: transparent; box-shadow: none;
    font-family: var(--font); font-size: 16px; color: var(--text-strong); padding: 0; }
.cmdk-input-wrap input:focus { box-shadow: none; border: none; }
.cmdk-esc { font-size: 10px; font-weight: 600; color: var(--text-faint); background: var(--bg-hover);
    border: 1px solid var(--border-soft); border-radius: 4px; padding: 2px 6px; }
.cmdk-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%;
    text-align: left; background: transparent; border: none; padding: 9px 10px; border-radius: 6px;
    cursor: pointer; font-family: var(--font); }
.cmdk-item span { font-size: 13.5px; font-weight: 500; color: var(--text-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item small { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.cmdk-item.sel { background: var(--bg-hover); }
.cmdk-empty { padding: 22px 16px; font-size: 13px; color: var(--text-faint); text-align: center; }

/* ---------- Asistente IA (FAB + panel = asistente flotante del Hub) ---------- */
.chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 54px; height: 54px;
    border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.4);
    transition: transform .12s ease; }
.chat-fab svg { width: 24px; height: 24px; }
.chat-fab:hover { transform: scale(1.06); }
.chat-fab.open { transform: scale(.9); opacity: 0; pointer-events: none; }
.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 901;
    width: 380px; max-width: calc(100vw - 24px); height: 560px; max-height: calc(100dvh - 40px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.5); animation: popIn .16s ease; }
.chat-widget.hidden { display: none; }
.chat-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-strong); }
.chat-head-t { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #4FB076; box-shadow: 0 0 0 3px rgba(79,176,118,.22); }
.chat-close { background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1;
    cursor: pointer; padding: 0 4px; border-radius: 5px; }
.chat-close:hover { background: var(--bg-hover); color: var(--text-strong); }
.chat-msgs { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 12px; }
.chat-empty { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; text-align: center; padding: 22px 12px; margin: auto 0; }
.chat-msg { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; word-wrap: break-word; }
.chat-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.chat-bot { align-self: flex-start; background: var(--bg-input); color: var(--text); border-bottom-left-radius: 5px; }
.chat-bot strong { color: var(--text-strong); }
.chat-typing { color: var(--text-faint); font-style: italic; }
.chat-err { background: rgba(217,138,138,.12); color: #E5A0A0; }
html:not([data-theme="dark"]) .chat-err { background: #FFE2DD; color: #5D1715; }
.chat-quick { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto;
    border-top: 1px solid var(--border-soft); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick button { flex: 0 0 auto; font-family: var(--font); font-size: 12px; font-weight: 500;
    color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.chat-quick button:hover { color: var(--text-strong); background: var(--bg-hover); border-color: var(--accent); }
#chat-quick-foto { border-style: dashed; }
.chat-attach-preview { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: rgba(82,156,202,.08); border-top: 1px solid rgba(82,156,202,.3); font-size: 12px; color: var(--text); }
.chat-attach-preview img { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.chat-attach-preview span { flex: 1; min-width: 0; }
.chat-attach-preview button { background: none; border: none; font-size: 20px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 2px 6px; }
.chat-attach-preview button:hover { color: #d98a8a; }
.chat-msg-img { max-width: 180px; max-height: 180px; border-radius: 8px; display: block; margin-bottom: 4px; }
.chat-attach-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; }
.chat-attach-btn svg { width: 17px; height: 17px; }
.chat-attach-btn:hover { color: var(--text-strong); background: var(--bg-hover); }
.chat-form { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border-soft); }
.chat-form input { flex: 1; min-width: 0; border-radius: 18px; padding: 9px 14px; font-size: 13.5px; }
.chat-send-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.chat-send-btn svg { width: 17px; height: 17px; }
.chat-send-btn:disabled { opacity: .5; cursor: default; }
.chat-action { align-self: stretch; background: var(--bg-card); border: 1px solid var(--accent);
    border-radius: 10px; padding: 13px 14px; }
.chat-action-res { font-size: 13.5px; line-height: 1.5; color: var(--text-strong); font-weight: 500; margin-bottom: 12px; }
.chat-action-btns { display: flex; gap: 8px; justify-content: flex-end; }
.chat-action-btns button { padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: 1px solid var(--border); font-family: var(--font); }
.chat-act-cancel { background: var(--bg-card); color: var(--text-muted); }
.chat-act-cancel:hover { background: var(--bg-hover); }
.chat-act-ok { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chat-act-ok:disabled, .chat-act-cancel:disabled { opacity: .5; cursor: default; }
.chat-done { border-color: var(--tag-green-bg) !important; color: var(--tag-green-fg); background: var(--tag-green-bg); }
#panel-asistente-ia textarea { width: 100%; resize: vertical; min-height: 84px; }

/* ============================================================
   RESPONSIVE del Ledger (el shell móvil lo maneja el CSS del Hub)
   ============================================================ */
@media (max-width: 1100px) {
    .kpi-grid, .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .balance-card { flex-direction: column; align-items: flex-start; }
    .balance-eq { justify-content: flex-start; width: 100%; }
    .proy-2col { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
    .layout-2col, .layout-2col.form-right { grid-template-columns: 1fr; }
    .layout-2col.form-right .col-side { order: 1; }
    .layout-2col.form-right .content-body { order: 2; }
    .dg-grid { grid-template-columns: 1fr; }
    .stats-kpis { grid-template-columns: repeat(2, 1fr); }
    .stats-rank { grid-template-columns: 1fr; gap: 24px; }
    .aging-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    html, body { overflow-x: clip; }
    .better-form.form-horizontal { flex-direction: column; align-items: stretch; }
    .form-horizontal .form-group, .form-horizontal .fg-tipo, .form-horizontal .fg-sm,
    .form-horizontal .fg-lg, .form-horizontal .fg-actions { flex: 1 1 100%; width: 100%; min-width: 0; }
    .form-horizontal .fg-actions { flex-direction: column; align-items: stretch; gap: 8px; height: auto; }
    .form-horizontal .fg-actions .btn-primary { width: 100%; }
    .form-row { flex-direction: column; gap: 10px; }
    .better-form-inline { flex-direction: column; align-items: stretch; }
    .better-form-inline input, .better-form-inline button { width: 100%; }
    .seg-pill { flex-wrap: wrap; }
    .charts-container { grid-template-columns: 1fr; }
    .table-container { max-width: 100%; }
    .card h2 { font-size: 32px; }
    .balance-card { padding: 18px 16px; }
    .balance-eq { gap: 14px; }
    .delta, .beq-k, .trend-pill { white-space: normal; }
    img, canvas, svg, video { max-width: 100%; }
    .meta-head { flex-direction: column; align-items: flex-start; gap: 3px; }
    .cierre-actions { flex-direction: column; align-items: stretch; }
    .cierre-actions .btn { width: 100%; }
    .fc-chips.snap-row { grid-template-columns: repeat(2, 1fr); }
    .fc-actions .btn { flex: 1 1 auto; }
    #tab-facturas .radio-group, #tab-fijos .radio-group, .fg-tipo .radio-group {
        flex-direction: column; align-items: flex-start; gap: 10px; height: auto; }
    .radio-label { white-space: normal; }
    .kpi-box .kpi-v, .aging-box .ag-v { font-size: 17px; overflow-wrap: anywhere; }
    .proy-nav, .cal-nav { flex-wrap: wrap; gap: 8px; }
    .proy-nav-lbl, .cal-nav-lbl { order: 0; width: 100%; text-align: center; margin-bottom: 2px; min-width: 0; }
    #proy-prev, #cal-prev { order: 1; }
    #proy-next, #cal-next { order: 2; }
    .proy-nav .btn-link, .cal-nav .btn-link { flex: 1 1 0; min-height: 42px; }
    .stats-toolbar { flex-wrap: wrap; gap: 10px; }
    .hist-filtros #hist-count { margin-left: 0; }
    .proy-block { flex-direction: column; gap: 6px; align-items: stretch; }
    .proy-lines { max-width: 100%; }
    .cmdk-overlay { padding: 8vh 10px 10px; }
    .cmdk-results { max-height: 56vh; }
}
@media (max-width: 760px) {
    .snap-row { grid-template-columns: repeat(2, 1fr); }
    .ahorro-tiers { grid-template-columns: 1fr; }
    .compra-top { flex-direction: column; }
    .compra-acciones { justify-content: flex-start; }
    .colchon-list { grid-template-columns: 1fr; }
    .cp-prog-row { flex-direction: column; align-items: flex-start; }
    .fc-cols { grid-template-columns: 1fr; }
}

/* Tablas → TARJETAS en móvil (nada se aplasta) */
@media (max-width: 700px) {
    .better-table thead { display: none; }
    .better-table, .better-table tbody, .better-table tr, .better-table td { display: block; width: 100%; }
    .table-container { border-top: none; }
    .better-table tbody tr { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-card);
        padding: 12px 14px; margin-bottom: 10px; }
    .better-table tbody tr:hover td { background: transparent; }
    .better-table td { border: none; padding: 3px 0; font-size: 14px; }
    .better-table td.text-right, .better-table td.text-center { text-align: left !important; }
    .better-table td.tx-amount { font-size: 17px; padding-top: 6px; }
    #tx-tbody td:first-child { font-size: 11.5px; color: var(--text-faint); font-weight: 500; }
    #rec-tbody td:nth-child(4)::before { content: "Día del mes: "; color: var(--text-faint); font-size: 11.5px; }
    #rec-tbody td:nth-child(5)::before { content: "Próximo: "; color: var(--text-faint); font-size: 11.5px; }
    #fac-tbody td:nth-child(2), #cot-tbody td:nth-child(2) { font-size: 11.5px; color: var(--text-faint); font-weight: 500; }
    .better-table td:last-child { display: flex; flex-wrap: wrap; gap: 8px;
        border-top: 1px solid var(--border-soft); margin-top: 9px; padding-top: 10px; white-space: normal !important; }
    .better-table td:last-child .btn-download, .better-table td:last-child .btn-delete {
        border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
        text-decoration: none; font-size: 12px; margin: 0; background: var(--bg-card); min-height: 38px;
        display: inline-flex; align-items: center; }
    .better-table td:last-child .btn-delete { color: #d98a8a; border-color: var(--tag-red-bg); }
    /* botones táctiles */
    .btn, .btn-primary, .btn-secondary { min-height: 42px; }
    input, select, textarea { font-size: 16px !important; }
}

/* Calendario en móvil: eventos como barras de color */
@media (max-width: 600px) {
    .cal-cell { min-height: 62px; padding: 4px 3px; gap: 3px; }
    .cal-daynum { font-size: 11px; }
    .cal-chip { padding: 0 !important; min-height: 0 !important; height: 7px; border: none !important; border-radius: 3px; overflow: hidden; }
    .cal-chip.cal-in { background: var(--inc-700); }
    .cal-chip.cal-out { background: var(--exp-700); }
    .cal-chip.cal-done-in { background: var(--done-in-bd); }
    .cal-chip.cal-done-out { background: var(--done-out-bd); }
    .cal-chip-t, .cal-chip-amt { display: none !important; }
    .cal-tot { margin-left: 0; width: 100%; }
    .cal-evt-menu { min-width: 0 !important; width: 86vw; max-width: 320px; left: 7vw !important; }
    .cal-evt-menu button { padding: 13px 15px; font-size: 15px; }
    .modal-overlay { align-items: flex-start; padding: 14px; overflow-y: auto; }
    .modal-box { padding: 20px 16px; width: 100%; max-width: 100%; margin: auto 0; max-height: 92vh; overflow-y: auto; }
    .modal-actions { flex-wrap: wrap; gap: 10px; }
    .modal-actions .btn, .modal-actions .btn-link { flex: 1 1 auto; text-align: center; justify-content: center; }
    /* chat a pantalla completa con fondo bloqueado */
    .chat-widget { inset: 0; right: 0; left: 0; bottom: 0; top: 0; width: auto;
        height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: none; }
    .chat-fab { right: 16px; bottom: 16px; }
    body.chat-open { overflow: hidden; position: fixed; inset: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .tab-panel.active, .modal-overlay, .modal-box, .cmdk-overlay, .cmdk-box, .chat-widget,
    .opts-menu, .cal-ctx, .cal-evt-menu, .toast { animation: none !important; }
}


/* ============ LOGIN (solo versión nube) — estilo shell BTTR Hub ============ */
.login-screen { position: fixed; inset: 0; z-index: 950; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: min(370px, 92vw); background: var(--panel-bg); border: 1px solid var(--border); border-radius: 10px; padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 7px; }
.login-logo { font-weight: 800; font-size: 22px; letter-spacing: .04em; color: var(--text-primary); margin-bottom: 2px; }
.login-logo span { font-size: 11px; vertical-align: super; }
.login-logo small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .34em; color: var(--text-muted); margin-top: 2px; }
.login-sub { font-size: 12.5px; color: var(--text-secondary); margin: 2px 0 14px; }
.login-card label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.login-card input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2, transparent); color: var(--text-primary); font-size: 14px; }
.login-card input:focus { outline: none; border-color: var(--accent, #529CCA); }
.login-card .btn { margin-top: 14px; width: 100%; }
.login-msg { min-height: 16px; font-size: 12.5px; color: #D98A8A; margin: 8px 0 0; }

/* ===== Multi-cuenta / captura rápida / ojito (portado de la app Flask 2026-07-04) ===== */
/* Split por cuenta (héroe) */
.split-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.split-chip { font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 7px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.9); white-space: nowrap; }
.split-chip.neg { color: #E9A8A8; border-color: rgba(217,138,138,.4); }
.split-move { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer;
    background: rgba(82,156,202,.16); border: 1px solid rgba(82,156,202,.4); color: #8FC1E6; }
.split-move:hover { background: rgba(82,156,202,.28); }
/* Split por cuenta bajo el NETO de la proyección */
.proy-split { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border, rgba(255,255,255,.09)); flex-wrap: wrap; }
.proy-split-chip { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 6px;
    background: var(--surface-2, rgba(255,255,255,.05)); border: 1px solid var(--border, rgba(255,255,255,.1)); color: var(--text-primary); white-space: nowrap; }
.proy-split-chip.neg { color: var(--exp-500, #D98A8A); }
.proy-split-move { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer; margin-left: auto;
    background: rgba(82,156,202,.14); border: 1px solid rgba(82,156,202,.38); color: var(--accent); }
.proy-split-move:hover { background: rgba(82,156,202,.24); }
.proy-split-lbl { font-size: 11.5px; color: var(--text-secondary, #9B9B9B); margin-right: 2px; }
/* Captura rápida (FAB + hoja) */
.quick-fab { position: fixed; right: 20px; bottom: 84px; z-index: 901; width: 54px; height: 54px; border-radius: 50%;
    background: var(--accent); color: #fff; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.quick-fab svg { width: 26px; height: 26px; }
.quick-fab:hover { transform: scale(1.06); }
@media (max-width: 700px) { .quick-fab { right: 16px; bottom: 78px; } }
.qc-sheet { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; }
.qc-sheet.hidden { display: none; }
.qc-card { width: 100%; max-width: 480px; background: var(--panel-bg, #202020); border: 1px solid var(--border);
    border-radius: 20px 20px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); animation: qcUp .22s ease; }
@media (min-width: 700px) { .qc-sheet { align-items: center; } .qc-card { border-radius: 18px; margin-bottom: 0; } }
@keyframes qcUp { from { transform: translateY(30px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.qc-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto 14px; }
.qc-seg { display: flex; gap: 6px; background: var(--surface-2, rgba(255,255,255,.05)); border-radius: 12px; padding: 4px; }
.qc-seg-btn { flex: 1; border: none; background: transparent; color: var(--text-secondary, #9B9B9B); font-size: 15px; font-weight: 600; padding: 11px; border-radius: 9px; cursor: pointer; }
.qc-seg-btn.active { background: var(--panel-bg, #2c2c2c); color: var(--text-strong); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.qc-amount { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 22px 0 6px; }
.qc-cur { font-size: 22px; font-weight: 600; color: var(--text-secondary, #9B9B9B); }
.qc-amount input { font-size: 46px; font-weight: 800; color: var(--text-strong); background: transparent; border: none; text-align: center; width: 100%; max-width: 260px; padding: 0; letter-spacing: -.02em; }
.qc-amount input:focus { outline: none; }
.qc-desc { width: 100%; font-size: 16px; padding: 13px 14px; border-radius: 11px; margin: 12px 0; background: var(--surface-2, rgba(255,255,255,.05)); border: 1px solid var(--border); color: var(--text-strong); }
.qc-cats { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 10px; }
.qc-cat { font-size: 13px; padding: 8px 13px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2, rgba(255,255,255,.04)); color: var(--text-secondary,#9B9B9B); cursor: pointer; white-space: nowrap; }
.qc-cat.active { border-color: var(--accent); color: var(--accent); background: rgba(82,156,202,.12); font-weight: 600; }
.qc-accts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.qc-acct-chip { font-size: 13.5px; padding: 8px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2, rgba(255,255,255,.04)); color: var(--text-secondary,#9B9B9B); cursor: pointer; white-space: nowrap; }
.qc-acct-chip.active { border-color: var(--accent); color: var(--text-strong); background: rgba(82,156,202,.14); font-weight: 600; }
.qc-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 16px; }
.qc-usd { font-size: 14px; color: var(--text-secondary,#9B9B9B); display: flex; align-items: center; gap: 5px; }
.qc-actions { display: flex; gap: 10px; }
.qc-cancel { flex: 0 0 auto; padding: 15px 20px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary,#9B9B9B); font-size: 15px; cursor: pointer; }
.qc-save { flex: 1; padding: 15px; border-radius: 12px; border: none; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.qc-save:active { transform: scale(.99); }
/* Ojito ver/ocultar contraseña en login */
.pw-wrap { position: relative; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 17px; opacity: .55; }
.pw-eye:hover, .pw-eye.on { opacity: 1; }
.pw-wrap input { padding-right: 40px; }

/* Gestión de cuentas / bancos en Ajustes */
.cuenta-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border-soft, rgba(255,255,255,.06)); }
.cuenta-nom { flex: 1; font-size: 14px; }
.cuenta-saldo { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-strong); }
.cuenta-del { border: none; background: none; color: var(--text-faint, #888); cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 6px; }
.cuenta-del:hover { background: rgba(220,80,80,.14); color: #d66; }