* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Arial,sans-serif; background:#f0f0f0; }

/* === PIN SCREEN === */
#pin-screen {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(135deg,#0D3B29 0%,#1B6B7C 100%);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; flex-direction:column;
}
#pin-screen img { width:100px; margin-bottom:24px; border-radius:50%; border:3px solid rgba(93,196,132,0.4); }
#pin-screen h2 { color:#5DC484; margin-bottom:6px; font-size:20px; font-weight:700; }
#pin-screen p { color:rgba(255,255,255,0.6); font-size:13px; margin-bottom:24px; }
#pin-screen input {
  padding:14px 24px; font-size:22px; text-align:center;
  border:2px solid #4BBFD6; border-radius:10px; background:rgba(255,255,255,0.08);
  color:white; width:220px; letter-spacing:10px; outline:none; transition:border 0.2s;
}
#pin-screen input:focus { border-color:#5DC484; background:rgba(255,255,255,0.12); }
#pin-screen input::placeholder { color:rgba(255,255,255,0.3); letter-spacing:4px; font-size:16px; }
#pin-screen button {
  margin-top:20px; padding:14px 48px; background:#2D8B5E;
  color:white; border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
#pin-screen button:hover { background:#4BBFD6; transform:translateY(-1px); }
#pin-error { color:#E74C3C; margin-top:12px; display:none; font-size:13px; }

/* === HEADER === */
.app-header {
  background:white; border-bottom:1px solid #e8e8e8; padding:10px 24px;
  display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:101;
  box-shadow:0 1px 8px rgba(0,0,0,0.04);
}
.app-header img { width:36px; height:36px; border-radius:50%; }
.app-header .brand { font-weight:700; color:#1A5C3A; font-size:15px; }
.app-header .condo-pills { display:flex; gap:6px; margin-left:20px; }
.condo-pill {
  padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600;
  cursor:pointer; border:1.5px solid #e8e8e8; background:transparent; color:#888; transition:all 0.2s;
}
.condo-pill.active { background:#2D8B5E; color:white; border-color:#2D8B5E; }
.condo-pill:hover { border-color:#2D8B5E; color:#2D8B5E; }
.condo-pill.active:hover { color:white; }
.app-header .spacer { flex:1; }
.app-header .user-name { font-size:13px; font-weight:600; color:#1A5C3A; }
.btn-refresh {
  padding:7px 14px; border:1.5px solid #e8e8e8; border-radius:8px; background:white;
  font-size:12px; cursor:pointer; transition:all 0.2s; color:#555;
}
.btn-refresh:hover { border-color:#2D8B5E; color:#2D8B5E; background:#F8FBF9; }
.btn-sistema {
  padding:7px 14px; border:1.5px solid #4BBFD6; border-radius:8px; background:#F0FAF5;
  font-size:12px; font-weight:600; color:#1B6B7C; text-decoration:none; cursor:pointer;
  transition:all 0.2s; white-space:nowrap;
}
.btn-sistema:hover { background:#4BBFD6; color:white; border-color:#4BBFD6; }

/* ===== ESTADO OCUPADO (anti doble clic) ===== */
button:disabled { opacity:0.55; cursor:progress !important; }
.btn-refresh:disabled { border-color:#e8e8e8; color:#999; background:#f7f7f7; }

/* ===== FLECHITA ACCESO AL SHEET (en el titulo de cada tab) ===== */
.sheet-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-left:8px; border-radius:6px;
  border:1.5px solid #e8e8e8; background:white; color:#2D8B5E;
  font-size:13px; text-decoration:none; vertical-align:middle; transition:all 0.2s;
}
.sheet-link:hover { background:#2D8B5E; color:white; border-color:#2D8B5E; }

/* === TAB NAV === */
.tab-nav { display:flex; background:#1A5C3A; padding:0; position:sticky; top:57px; z-index:100; overflow-x:auto; }
.tab-btn {
  padding:13px 16px; border:none; background:transparent; color:rgba(255,255,255,0.65);
  font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s;
  white-space:nowrap; border-bottom:3px solid transparent;
}
.tab-btn.active { background:rgba(255,255,255,0.1); color:white; border-bottom-color:#4BBFD6; }
.tab-btn:hover { color:white; background:rgba(255,255,255,0.05); }
.tab-btn .badge { background:#E74C3C; color:white; font-size:10px; padding:2px 6px; border-radius:10px; margin-left:5px; }

/* === MAIN === */
.main { max-width:1300px; margin:0 auto; padding:24px; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* === KPI GRID === */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:20px; }
.kpi-card {
  background:white; border:1px solid #e8e8e8; border-radius:12px; padding:18px 16px;
  cursor:pointer; transition:all 0.2s; position:relative;
}
.kpi-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.08); border-color:#2D8B5E; }
.kpi-card .kpi-icon { font-size:20px; margin-bottom:6px; }
.kpi-card .kpi-num { font-size:28px; font-weight:800; color:#1A5C3A; line-height:1; }
.kpi-card .kpi-label { font-size:11px; color:#888; margin-top:4px; font-weight:500; text-transform:uppercase; letter-spacing:0.3px; }
.kpi-card.danger .kpi-num { color:#E74C3C; }
.kpi-card.warning .kpi-num { color:#E6A817; }

/* === SECTION CARDS (tables) === */
.section-card {
  background:white; border:1px solid #e8e8e8; border-radius:12px;
  overflow:hidden; margin-bottom:20px;
}
.section-header {
  padding:16px 20px; display:flex; align-items:center; gap:12px;
  border-bottom:2px solid #E8F8F0; flex-wrap:wrap;
}
.section-header h3 { font-size:15px; color:#1A5C3A; font-weight:700; flex:1; }
.section-header input, .section-header select {
  padding:8px 12px; border:1.5px solid #ddd; border-radius:8px; font-size:12px; outline:none; transition:border 0.2s;
}
.section-header input:focus, .section-header select:focus { border-color:#2D8B5E; box-shadow:0 0 0 3px rgba(45,139,94,0.08); }

/* === TABLES === */
table { width:100%; border-collapse:collapse; font-size:12px; }
thead { background:#F8FBF9; }
th { padding:10px 14px; text-align:left; font-weight:700; color:#1A5C3A; font-size:11px; text-transform:uppercase; letter-spacing:0.3px; border-bottom:1px solid #e8e8e8; }
td { padding:10px 14px; border-bottom:1px solid #f0f0f0; vertical-align:middle; color:#333; }
tr:hover { background:#FAFFFE; }
.cell-edit {
  padding:6px 10px; border:1.5px solid #ddd; border-radius:6px; font-size:12px;
  width:100%; outline:none; transition:border 0.2s; font-family:inherit;
}
.cell-edit:focus { border-color:#2D8B5E; box-shadow:0 0 0 3px rgba(45,139,94,0.1); }
select.cell-edit { cursor:pointer; background:white; }

/* === BUTTONS === */
.btn-save {
  padding:6px 14px; background:#2D8B5E; color:white; border:none; border-radius:6px;
  font-size:11px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.btn-save:hover { background:#4BBFD6; }
.btn-save:disabled { opacity:0.4; cursor:not-allowed; background:#999; }

/* === STATUS BADGES === */
.status { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.status-pendiente { background:#FFF3E0; color:#E65100; }
.status-proceso { background:#E3F2FD; color:#1565C0; }
.status-completado { background:#E8F5E9; color:#2E7D32; }
.status-vencido { background:#FFEBEE; color:#C62828; }
.status-mora { background:#FCE4EC; color:#AD1457; }

/* === FILTER PILLS === */
.filter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.filter-pill {
  padding:6px 14px; border-radius:20px; font-size:11px; font-weight:600;
  cursor:pointer; border:1.5px solid #e8e8e8; background:white; color:#888; transition:all 0.2s;
}
.filter-pill.active { background:#2D8B5E; color:white; border-color:#2D8B5E; }
.filter-pill:hover { border-color:#2D8B5E; }

/* === ACCESOS GRID === */
.accesos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.acceso-card {
  background:white; border:1px solid #e8e8e8; border-radius:12px; padding:16px; transition:all 0.2s;
}
.acceso-card:hover { border-color:#2D8B5E; box-shadow:0 2px 12px rgba(45,139,94,0.08); }
.acceso-card h4 { font-size:13px; color:#1A5C3A; margin-bottom:6px; font-weight:600; }
.acceso-card a { color:#2D8B5E; font-size:12px; text-decoration:none; font-weight:500; }
.acceso-card a:hover { color:#4BBFD6; text-decoration:underline; }

/* === TOAST === */
.toast {
  position:fixed; bottom:24px; right:24px; padding:14px 24px; border-radius:10px;
  color:white; font-size:13px; font-weight:600; z-index:9999;
  animation:slideUp 0.3s ease; box-shadow:0 4px 20px rgba(0,0,0,0.2);
}
.toast.success { background:#2D8B5E; }
.toast.error { background:#E74C3C; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* === LOADING === */
.loading { text-align:center; padding:40px; color:#888; }
.spinner { display:inline-block; width:28px; height:28px; border:3px solid #e8e8e8; border-top-color:#2D8B5E; border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* === FOOTER === */
.app-footer { text-align:center; padding:20px; color:#888; font-size:11px; border-top:1px solid #e8e8e8; margin-top:32px; }
.app-footer .status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#2D8B5E; margin-right:4px; }

/* === UTILITIES === */
.hidden { display:none!important; }
.text-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== PENDIENTES CARDS ===== */
.pend-grid { display:flex; flex-direction:column; gap:16px; }
.mod-card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.06); overflow:hidden; border:1px solid #e8ecf0; }
.mod-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid #f0f0f0; }
.mod-header-left { display:flex; align-items:center; gap:12px; }
.mod-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.mod-icon-cite { background:#E3F2FD; }
.mod-icon-cot { background:#F3E5F5; }
.mod-icon-mora { background:#FCE4EC; }
.mod-icon-activo { background:#E8F5E9; }
.mod-icon-nov { background:#E0F7FA; }
.mod-title { font-weight:700; font-size:14px; color:#1a2b3c; }
.mod-count { font-size:12px; color:#888; margin-top:2px; }
.mod-link { display:flex; align-items:center; gap:6px; font-size:12px; color:#2D8B5E; font-weight:600; text-decoration:none; padding:6px 12px; border-radius:8px; cursor:pointer; transition:background 0.2s; }
.mod-link:hover { background:#f0faf5; }
.mod-table { width:100%; border-collapse:collapse; }
.mod-table th { text-align:left; padding:10px 20px; font-size:11px; color:#888; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; background:#fafbfc; }
.mod-table td { padding:10px 20px; font-size:13px; border-top:1px solid #f5f5f5; color:#333; }
.mod-table tr:hover td { background:#f8fffe; }
.mod-empty { padding:20px; text-align:center; color:#2D8B5E; font-size:13px; }
.mod-more { padding:10px 20px; text-align:center; border-top:1px solid #f0f0f0; }
.mod-more button { background:none; border:none; color:#2D8B5E; font-weight:600; font-size:12px; cursor:pointer; padding:6px 16px; border-radius:8px; transition:background 0.2s; }
.mod-more button:hover { background:#f0faf5; }
.nov-escalada { border-left:3px solid #FF6F00; }
.pend-celebration { text-align:center; padding:60px 20px; }
.pend-celebration .emoji { font-size:48px; margin-bottom:12px; }
.pend-celebration .msg { font-size:16px; color:#2D8B5E; font-weight:600; }
.pend-celebration .sub { font-size:13px; color:#888; margin-top:6px; }

/* ===== ACTIVOS TAB REDESIGN ===== */
.activos-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.activos-header h3 { font-size:16px; color:#1a2b3c; margin:0; }
.act-actions { display:flex; gap:8px; }
.btn-act { padding:7px 14px; border-radius:8px; font-size:11px; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; }
.btn-act-alta { background:#E8F5E9; color:#2E7D32; }
.btn-act-alta:hover { background:#C8E6C9; }
.btn-act-baja { background:#FFEBEE; color:#C62828; }
.btn-act-baja:hover { background:#FFCDD2; }
.btn-act-hist { background:#E3F2FD; color:#1565C0; }
.btn-act-hist:hover { background:#BBDEFB; }
.act-subtabs { display:flex; gap:4px; margin-bottom:14px; background:#f8f9fa; border-radius:10px; padding:4px; }
.act-subtab { padding:7px 14px; border-radius:8px; font-size:11px; font-weight:600; cursor:pointer; border:none; background:transparent; color:#666; }
.act-subtab.active { background:#2D8B5E; color:#fff; }
.act-subtab .cnt { background:rgba(0,0,0,0.08); padding:1px 6px; border-radius:8px; font-size:10px; margin-left:4px; }
.act-subtab.active .cnt { background:rgba(255,255,255,0.3); }
.act-card { background:#fff; border-radius:10px; padding:14px 18px; margin-bottom:10px; box-shadow:0 1px 4px rgba(0,0,0,0.05); border:1px solid #eef1f4; }
.act-card-header { display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.act-card-left { display:flex; align-items:center; gap:12px; }
.act-icon { width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.act-icon-falta { background:#FFEBEE; }
.act-icon-dano { background:#FFF3E0; }
.act-icon-rep { background:#E3F2FD; }
.act-icon-ok { background:#E8F5E9; }
.act-name { font-size:13px; font-weight:700; color:#1a2b3c; }
.act-meta { font-size:11px; color:#888; margin-top:2px; }
.act-badge { padding:3px 10px; border-radius:12px; font-size:10px; font-weight:600; }
.act-badge-pend { background:#FFF3E0; color:#E65100; }
.act-badge-gest { background:#E3F2FD; color:#1565C0; }
.act-badge-ok { background:#E8F5E9; color:#2E7D32; }
.act-expand { background:none; border:1px solid #ddd; padding:5px 10px; border-radius:6px; font-size:11px; cursor:pointer; color:#555; }
.act-expand:hover { background:#f0faf5; border-color:#2D8B5E; color:#2D8B5E; }
.act-panel { background:#f8fffe; border:1px solid #d4edda; border-radius:8px; padding:14px; margin-top:10px; display:none; }
.act-panel.visible { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.act-panel .fld { display:flex; flex-direction:column; gap:3px; }
.act-panel .fld label { font-size:10px; font-weight:600; color:#666; text-transform:uppercase; }
.act-panel .fld select, .act-panel .fld input { padding:6px 10px; border:1px solid #ddd; border-radius:6px; font-size:12px; min-width:120px; }
.act-panel .btn-save-act { padding:7px 14px; background:#2D8B5E; color:#fff; border:none; border-radius:8px; font-size:11px; font-weight:600; cursor:pointer; }
/* Modal */
.modal-bg { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center; }
.modal-bg.show { display:flex; }
.modal-box { background:#fff; border-radius:16px; width:500px; max-width:92vw; max-height:85vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.modal-head { padding:18px 22px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; }
.modal-head h3 { font-size:15px; color:#1a2b3c; }
.modal-x { width:30px; height:30px; border-radius:8px; border:none; background:#f5f5f5; font-size:16px; cursor:pointer; }
.modal-content { padding:22px; }
.modal-step { margin-bottom:16px; }
.modal-step-lbl { font-size:10px; font-weight:700; color:#2D8B5E; text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.modal-step-lbl .sn { background:#2D8B5E; color:#fff; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; }
.modal-content select, .modal-content input, .modal-content textarea { width:100%; padding:9px 12px; border:1px solid #ddd; border-radius:8px; font-size:12px; }
.modal-content textarea { resize:vertical; min-height:50px; }
.modal-preview { background:#f8f9fa; border-radius:8px; padding:12px; margin-top:10px; border:1px solid #e8ecf0; font-size:12px; }
.modal-preview .prow { display:flex; justify-content:space-between; padding:3px 0; }
.modal-preview .prow .pl { color:#888; }
.modal-preview .prow .pv { font-weight:600; }
.modal-foot { padding:14px 22px; border-top:1px solid #f0f0f0; display:flex; justify-content:flex-end; gap:8px; }
.modal-foot .btn-canc { padding:9px 18px; border-radius:8px; border:1px solid #ddd; background:#fff; font-size:12px; cursor:pointer; }
.modal-foot .btn-conf { padding:9px 18px; border-radius:8px; border:none; color:#fff; font-size:12px; font-weight:600; cursor:pointer; }
.modal-foot .btn-conf-baja { background:#C62828; }
.modal-foot .btn-conf-alta { background:#2E7D32; }
.act-hist { margin-top:16px; display:none; }
.act-hist.show { display:block; }
.act-hist table { width:100%; border-collapse:collapse; }
.act-hist th { text-align:left; padding:8px 14px; font-size:10px; color:#888; background:#fafbfc; font-weight:600; text-transform:uppercase; }
.act-hist td { padding:8px 14px; font-size:12px; border-top:1px solid #f5f5f5; }

/* === SISTEMA 14: GESTIONES (v4.9) === */
.g-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.g-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.g-kpi{background:#fff;border:1px solid #e2e8ed;border-radius:9px;padding:10px;text-align:center;cursor:pointer}
.g-kpi b{display:block;font-size:21px;color:#1A5C3A;line-height:1.2}
.g-kpi span{font-size:10px;color:#64748b;font-weight:700;letter-spacing:.3px}
.g-kpi.r b{color:#dc2626}.g-kpi.v b{color:#5b21b6}.g-kpi.g b{color:#16a34a}
.g-sec{font-size:12px;font-weight:800;letter-spacing:.4px;margin:16px 0 7px}
.g-card{background:#fff;border:1px solid #e2e8ed;border-left:4px solid #94a3b8;border-radius:8px;padding:10px 12px;margin-bottom:7px}
.g-card.r{border-left-color:#dc2626;background:#fffafa}
.g-card.y{border-left-color:#d97706}
.g-card.v{border-left-color:#7c3aed;background:#fbfaff}
.g-card.g{border-left-color:#16a34a}
.g-top{display:flex;justify-content:space-between;gap:10px;cursor:pointer}
.g-asunto{font-size:13.5px;font-weight:600;color:#1e293b}
.g-meta{font-size:11px;color:#64748b;margin-top:4px}
.g-chip{display:inline-block;background:#eef3f7;color:#475569;padding:1px 7px;border-radius:5px;font-size:10px;font-weight:700;margin-right:4px}
.g-chip.alta{background:#fee2e2;color:#991b1b}
.g-chip.media{background:#fef3c7;color:#92400e}
.g-chip.baja{background:#e0f2fe;color:#075985}
.g-panel{display:none;margin-top:9px;padding-top:9px;border-top:1px dashed #e2e8ed}
.g-panel.show{display:block}
.g-cruce{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:760px){.g-cruce,.g-kpis,.g-form-row{grid-template-columns:1fr}}
.g-col{border-radius:8px;padding:10px}
.g-col-a{background:#f0f9ff;border:1px solid #dbeafe}
.g-col-b{background:#f0faf5;border:1px solid #cfe8dc}
.g-col-lock{background:#f7fafb;border:1px solid #e2e8ed}
.g-lbl{font-size:9.5px;font-weight:800;letter-spacing:.3px;margin-bottom:5px;display:block}
.g-in{width:100%;box-sizing:border-box;border:1px solid #cfd9e1;border-radius:6px;padding:6px 8px;font-size:12px;font-family:inherit}
.g-in:disabled{background:#eef2f5;color:#94a3b8}
.g-acts{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.g-btn{border:none;border-radius:6px;padding:6px 11px;font-size:11.5px;font-weight:700;cursor:pointer}
.g-btn-ok{background:#2D8B5E;color:#fff}
.g-btn-dev{background:#fff8e6;color:#8a6d1a;border:1px solid #f3dfa8}
.g-btn-sec{background:#eef3f7;color:#475569}
.g-lockmsg{font-size:11px;color:#94a3b8;font-weight:600}
.g-form{background:#f0faf5;border:1px solid #cfe8dc;border-radius:10px;padding:14px;margin-bottom:14px;display:none}
.g-form.show{display:block}
.g-form-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:9px}
.g-hist-toggle{background:#f7fafb;border:1px dashed #cfd9e1;border-radius:8px;padding:9px 12px;font-size:12px;color:#64748b;cursor:pointer;font-weight:600}
.bell{position:relative;background:#fff2f2;border:1px solid #fecaca;color:#dc2626;border-radius:99px;padding:3px 10px;font-size:12px;font-weight:800;margin-right:8px;display:none}
.bell.show{display:inline-block}