*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

:root {
  --red:       #E8003D;
  --red-light: #FFE5ED;
  --navy:      #12122A;
  --blue:      #121E6C;
  --gray-bg:   #F4F5F8;
  --gray-line: #E4E6EF;
  --gray-text: #7B7E96;
  --text:      #1C1C3A;
  --white:     #FFFFFF;
  --green:     #00C48C;
  --orange:    #FF9500;
  --sidebar-w: 220px;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  background: var(--gray-bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── SIDEBAR ── */
aside {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--white);
  border-right: 1px solid var(--gray-line);
  display: flex;
  flex-direction: column;
  padding: 20px 0 16px;
  overflow-y: auto;
}
.logo { padding: 0 20px 20px; font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -1px; }
.user-block { padding: 0 20px 20px; border-bottom: 1px solid var(--gray-line); }
.user-block .name { font-weight: 600; font-size: 13px; color: var(--text); }
.user-block .role { font-size: 11px; color: var(--gray-text); margin-top: 2px; }
.nav-section { padding: 16px 0 4px; }
.nav-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--gray-text); text-transform: uppercase; padding: 0 20px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px; cursor: pointer; color: var(--text);
  font-size: 13px; font-weight: 400; text-decoration: none;
  border-left: 3px solid transparent; transition: background 0.15s;
}
.nav-item:hover { background: var(--gray-bg); }
.nav-item.active { background: #FFF0F4; border-left-color: var(--red); color: var(--red); font-weight: 600; }
.nav-item.active .nav-icon { color: var(--red); }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--gray-text); display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.badge { margin-left: auto; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; min-width: 20px; text-align: center; }
.nav-logout { margin-top: auto; padding: 12px 20px 0; border-top: 1px solid var(--gray-line); }
.nav-logout a { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-text); text-decoration: none; cursor: pointer; }
.nav-logout a:hover { color: var(--red); }

/* ── MAIN ── */
main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── TOPBAR ── */
header { background: var(--white); border-bottom: 1px solid var(--gray-line); height: 52px; display: flex; align-items: center; justify-content: flex-end; padding: 0 28px; gap: 14px; flex-shrink: 0; }
.topbar-icon { font-size: 18px; color: var(--gray-text); cursor: pointer; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ── PAGE ── */
.page { flex: 1; overflow-y: auto; padding: 28px 32px; }
.page-title { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 20px; }

/* ── TABS ── */
.tabs { display: flex; border-bottom: 2px solid var(--gray-line); margin-bottom: 20px; gap: 0; }
.tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--gray-text); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s; text-decoration: none; display: block; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.tab-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 50px; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; vertical-align: middle; line-height: 1; }

/* ── TOOLBAR ── */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.search-wrap { position: relative; width: 350px; flex-shrink: 0; }
.search-wrap input { width: 100%; padding: 8px 12px 8px 36px; border: 1px solid var(--gray-line); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--white); color: var(--text); outline: none; transition: border-color 0.15s; }
.search-wrap input:focus { border-color: var(--blue); }
.search-wrap input::placeholder { color: var(--gray-text); }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--gray-text); font-size: 15px; pointer-events: none; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 50px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: opacity 0.15s; }
.btn:hover { opacity: 0.88; }
.btn-primary { background: var(--red); color: #fff; }
.btn-outline { background: var(--white); color: var(--text); border: 1px solid var(--gray-line); }
.btn-ghost { background: none; border: none; color: var(--red); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 8px 4px; }
.btn-ghost:hover { opacity: 0.75; }

.records-count { font-size: 12px; color: var(--gray-text); margin-bottom: 12px; }
.records-count span { font-weight: 600; color: var(--text); }

/* ── TABLE ── */
.table-wrap { background: var(--white); border-radius: 10px; border: 1px solid var(--gray-line); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 1100px; }
thead th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-text); border-bottom: 1px solid var(--gray-line); white-space: nowrap; background: #FAFAFA; }
tbody tr { border-bottom: 1px solid var(--gray-line); transition: background 0.12s; cursor: pointer; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--gray-bg); }
tbody td { padding: 11px 14px; font-size: 12px; color: var(--text); white-space: nowrap; font-weight: 400; }
td.muted { color: var(--gray-text); }
td.right { text-align: right; }

/* ── CHIPS ── */
.chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; }
.chip-high { background: #E6F9F3; color: #00875A; }
.chip-high::before { background: #00875A; }
.chip-mid { background: #FFF4E0; color: #B36A00; }
.chip-mid::before { background: #FF9500; }
.chip-low { background: #FFEBEE; color: #C0002A; }
.chip-low::before { background: var(--red); }
.chip-grande { background: #EEF0FF; color: #3D54FB; }
.chip-grande::before { background: #3D54FB; }
.chip-mediano { background: #FFF4E0; color: #B36A00; }
.chip-mediano::before { background: #FF9500; }
.chip-pequeno { background: #F4F5F8; color: #7B7E96; }
.chip-pequeno::before { background: #7B7E96; }

/* ── TAB EMPTY ── */
.tab-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 0; color: var(--gray-text); }
.tab-empty .icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.tab-empty p { font-size: 14px; }

/* ── GESTIÓN CARDS ── */
.gestion-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.gestion-toolbar .search-wrap { width: 350px; max-width: 350px; }

.month-nav { display: flex; align-items: center; border: 1.5px solid var(--navy); border-radius: 10px; background: var(--white); overflow: hidden; }
.month-nav button { background: none; border: none; cursor: pointer; padding: 8px 16px; font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1; transition: background 0.12s; }
.month-nav button:hover { background: var(--gray-bg); }
.month-nav span { padding: 8px 16px; font-size: 15px; font-weight: 700; color: var(--navy); border-left: 1.5px solid var(--navy); border-right: 1.5px solid var(--navy); white-space: nowrap; letter-spacing: -0.02em; }

.status-segment { display: flex; align-items: center; border: 1px solid var(--gray-line); border-radius: 8px; overflow: hidden; background: var(--white); margin-bottom: 16px; width: fit-content; }
.seg-btn { padding: 7px 18px; font-size: 12px; font-weight: 500; font-family: inherit; background: none; border: none; cursor: pointer; color: var(--gray-text); border-right: 1px solid var(--gray-line); transition: background 0.12s, color 0.12s; white-space: nowrap; }
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--gray-bg); color: var(--text); }
.seg-btn.active { background: var(--navy); color: #fff; font-weight: 600; }
.seg-btn.active.ganado { background: #00875A; }
.seg-btn.active.perdido { background: var(--red); }

.cards-grid { --card-min: 160px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 160px), 1fr)); gap: 10px; }

.renov-card { background: var(--white); border: 1px solid var(--gray-line); border-radius: 8px; padding: 11px 12px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; display: flex; flex-direction: column; gap: 7px; position: relative; }
.renov-card:hover { border-color: #b3bcf5; box-shadow: 0 4px 16px rgba(61,84,251,0.08); }
.renov-card.ganado { border-left: 3px solid #00875A; }
.renov-card.perdido { border-left: 3px solid var(--red); }
.renov-card.importante { background: #FFFBE6; border-color: #F0C040; }
.renov-card.importante:hover { border-color: #D4A000; box-shadow: 0 4px 16px rgba(240,192,64,0.18); }
.renov-card.validado { background: #F0FBF6; border-color: #A8DFC4; }
.renov-card.validado:hover { border-color: #5EBA96; box-shadow: 0 4px 16px rgba(0,196,140,0.12); }

.importante-label { font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 7px; user-select: none; }
.importante-label input[type=checkbox] { display: none; }
.importante-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--gray-line); background: var(--white); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; }
.importante-check svg { width: 11px; height: 11px; display: none; }
.importante-label input:checked ~ .importante-check { background: #F0C040; border-color: #C89A00; }
.importante-label input:checked ~ .importante-check svg { display: block; }
.importante-star { font-size: 14px; color: #C89A00; display: none; }
.renov-card.importante .importante-star { display: inline; }

.card-header { display: flex; align-items: center; gap: 6px; }
.card-day { font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1; }
.card-cal-x { width: 16px; height: 16px; flex-shrink: 0; color: var(--gray-text); opacity: 0.55; }
.card-name { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-divider { height: 1px; background: var(--gray-line); }
.card-meta { display: flex; flex-direction: column; gap: 4px; }
.card-row { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--gray-text); }
.card-row strong { color: var(--text); font-weight: 500; }
.card-icon { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.45; cursor: default; }
.card-plan { font-size: 10px; color: var(--blue); background: #EEF0FF; padding: 2px 7px; border-radius: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.card-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.card-fecha-gestion { font-size: 10px; color: var(--gray-text); }
.card-comment-btn { background: none; border: none; cursor: pointer; padding: 2px; color: var(--gray-text); display: flex; align-items: center; border-radius: 4px; transition: color 0.12s, background 0.12s; }
.card-comment-btn:hover { color: var(--blue); background: #EEF0FF; }
.card-comment-btn svg { width: 16px; height: 16px; }
.card-prob { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; margin-left: auto; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-high { background: #00875A; }
.dot-mid { background: #FF9500; }
.dot-low { background: var(--red); }

/* ── TOOLTIPS ── */
.has-tip { position: relative; cursor: default; }
.has-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 10px; font-weight: 500; white-space: nowrap; padding: 3px 7px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 200; }
.has-tip:hover::after { opacity: 1; }

/* ── COMMENT DRAWER ── */
.comment-drawer { position: fixed; top: 0; right: -420px; bottom: 0; width: 400px; background: var(--white); z-index: 102; display: flex; flex-direction: column; transition: right 0.25s ease; box-shadow: -4px 0 24px rgba(0,0,0,0.12); }
.comment-drawer.open { right: 0; }
.comment-drawer-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--gray-line); }
.comment-drawer-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.prob-select-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; justify-content: space-between; }
.prob-select-right { display: flex; align-items: center; gap: 6px; }
.select-label { font-size: 11px; font-weight: 600; color: var(--gray-text); margin-bottom: 4px; display: block; }
.prob-history-btn { background: none; border: none; cursor: pointer; padding: 4px; color: var(--gray-text); border-radius: 4px; display: flex; align-items: center; transition: color 0.12s, background 0.12s; position: relative; }
.prob-history-btn:hover { color: var(--blue); background: #EEF0FF; }
.prob-history-btn svg { width: 15px; height: 15px; }
.prob-opt-btn { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--gray-line); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--white); color: var(--gray-text); transition: all 0.15s; }
.prob-opt-btn.alto.active { border-color: #00875A; background: #D4F1E7; color: #00623D; }
.prob-opt-btn.medio.active { border-color: #CC7700; background: #FFF0CC; color: #8A5A00; }
.prob-opt-btn.bajo.active { border-color: var(--red); background: var(--red-light); color: var(--red); }
.estado-opt-btn { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--gray-line); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--white); color: var(--gray-text); transition: all 0.15s; }
.estado-opt-btn.active { border-color: var(--blue); background: #EEF0FF; color: var(--blue); }
.estado-opt-btn.ganado.active { border-color: #00875A; background: #E6F7F2; color: #00875A; }
.estado-opt-btn.perdido.active { border-color: var(--red); background: var(--red-light); color: var(--red); }
.estado-history-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-line); }
.estado-history-item:last-child { border-bottom: none; }
.estado-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 50px; white-space: nowrap; }
.estado-tag.proceso { background: #EEF0FF; color: var(--blue); }
.estado-tag.ganado { background: #E6F7F2; color: #00875A; }
.estado-tag.perdido { background: var(--red-light); color: var(--red); }
.estado-history-comment { font-size: 12px; color: var(--gray-text); margin-top: 3px; }
.comment-list { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.comment-item { display: flex; flex-direction: column; gap: 4px; }
.comment-meta { display: flex; align-items: center; gap: 8px; }
.comment-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comment-author { font-size: 12px; font-weight: 600; color: var(--text); }
.comment-date { font-size: 11px; color: var(--gray-text); margin-left: auto; }
.comment-text { font-size: 12px; color: var(--text); line-height: 1.5; background: var(--gray-bg); border-radius: 0 8px 8px 8px; padding: 8px 10px; margin-left: 36px; }
.comment-add { padding: 14px 20px; border-top: 1px solid var(--gray-line); display: flex; flex-direction: column; gap: 8px; }
.comment-add textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--gray-line); border-radius: 8px; font-size: 13px; font-family: inherit; resize: none; height: 72px; outline: none; color: var(--text); }
.comment-add textarea:focus { border-color: var(--blue); }
.comment-add-footer { display: flex; justify-content: flex-end; gap: 8px; }

/* ── MODALS ── */
.center-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(18,18,42,0.5); z-index: 200; align-items: center; justify-content: center; }
.center-modal-backdrop.open { display: flex; }
.center-modal { background: var(--white); border-radius: 12px; width: 420px; max-width: 90vw; box-shadow: 0 8px 40px rgba(0,0,0,0.18); display: flex; flex-direction: column; overflow: hidden; max-height: 80vh; }
.center-modal-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--gray-line); display: flex; align-items: center; justify-content: space-between; }
.center-modal-title { font-size: 15px; font-weight: 700; color: var(--navy); }
.center-modal-body { overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.prob-history-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--gray-bg); border-radius: 8px; }
.prob-history-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prob-history-info { flex: 1; }
.prob-history-name { font-size: 12px; font-weight: 600; color: var(--text); }
.prob-history-date { font-size: 11px; color: var(--gray-text); }
.prob-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.prob-tag.alto { background: #D4F1E7; color: #00623D; }
.prob-tag.medio { background: #FFF0CC; color: #8A5A00; }
.prob-tag.bajo { background: #FFE0E8; color: #A30028; }

/* ── DRAWER / FILTER ── */
.drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(18,18,42,0.45); z-index: 100; }
.drawer-backdrop.open { display: block; }
.drawer { position: fixed; top: 0; right: -400px; bottom: 0; width: 360px; background: var(--white); z-index: 101; display: flex; flex-direction: column; transition: right 0.25s ease; box-shadow: -4px 0 24px rgba(0,0,0,0.1); }
.drawer.open { right: 0; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--gray-line); }
.drawer-title { font-size: 16px; font-weight: 700; color: var(--navy); }
.drawer-close { cursor: pointer; font-size: 20px; color: var(--gray-text); background: none; border: none; line-height: 1; }
.drawer-close:hover { color: var(--text); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.filter-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.filter-group select, .filter-group input { width: 100%; padding: 9px 12px; border: 1px solid var(--gray-line); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text); background: var(--white); appearance: none; outline: none; cursor: pointer; }
.filter-group select:focus, .filter-group input:focus { border-color: var(--blue); }
.select-wrap { position: relative; }
.select-wrap::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--gray-text); font-size: 12px; }
.drawer-footer { padding: 16px 24px; border-top: 1px solid var(--gray-line); display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

/* ── SORT ── */
.sort-wrap { position: relative; }
.sort-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--white); border: 1px solid var(--gray-line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 50; min-width: 200px; overflow: hidden; }
.sort-menu.open { display: block; }
.sort-option { padding: 10px 16px; font-size: 13px; cursor: pointer; color: var(--text); }
.sort-option:hover { background: var(--gray-bg); }

/* ── PAGINATION ── */
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--gray-line); }
.page-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--gray-line); background: var(--white); font-size: 12px; font-weight: 500; font-family: inherit; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.page-btn:hover { border-color: var(--blue); color: var(--blue); }
.page-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.page-btn:disabled { opacity: 0.4; cursor: default; }

/* ── DETAIL ── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-text); margin-bottom: 12px; }
.breadcrumb a { color: var(--gray-text); text-decoration: none; cursor: pointer; }
.breadcrumb a:hover { color: var(--blue); }
.detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.detail-title-row { display: flex; align-items: center; gap: 10px; }
.back-btn { background: none; border: none; cursor: pointer; padding: 4px 6px 4px 0; color: var(--text); font-size: 18px; line-height: 1; transition: color 0.12s; }
.back-btn:hover { color: var(--blue); }
.detail-name { font-size: 22px; font-weight: 700; color: var(--navy); }
.detail-meta { font-size: 13px; color: var(--text); margin-bottom: 16px; }
.detail-meta strong { font-weight: 600; }
.detail-kv-row { display: flex; gap: 40px; flex-wrap: wrap; font-size: 13px; margin-bottom: 12px; }
.detail-kv { display: flex; flex-direction: column; gap: 2px; }
.detail-kv .kv-label { font-size: 12px; color: var(--gray-text); }
.detail-kv .kv-val { font-size: 13px; color: var(--text); }
.detail-card { background: var(--white); border: 1px solid var(--gray-line); border-radius: 10px; padding: 20px 24px; margin-bottom: 14px; }
.detail-section-title { font-size: 14px; font-weight: 700; color: var(--blue); margin-bottom: 16px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
.detail-field { display: flex; flex-direction: column; gap: 3px; }
.detail-field .f-label { font-size: 12px; font-weight: 600; color: var(--blue); }
.detail-field .f-val { font-size: 13px; color: var(--text); }

/* ── CONFIG ── */
.config-page { display: none; flex-direction: column; padding: 28px 32px; overflow-y: auto; flex: 1; }

/* ── ALERTAS ── */
.alert-section { margin-bottom: 24px; }
.alert-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 0; border-bottom: 2px solid var(--gray-line); }
.alert-section-title { font-size: 13px; font-weight: 700; color: var(--navy); }
.alert-section-count { font-size: 11px; font-weight: 600; background: var(--gray-bg); color: var(--gray-text); border-radius: 20px; padding: 2px 8px; }
.alert-section-header.vencidas .alert-section-title { color: var(--red); }
.alert-section-header.vencidas { border-bottom-color: var(--red); }
.alert-section-header.hoy .alert-section-title { color: var(--blue); }
.alert-section-header.hoy { border-bottom-color: var(--blue); }
.alert-section-header.manana .alert-section-title { color: #B36A00; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.alert-dot.vencida { background: var(--red); }
.alert-dot.hoy { background: var(--blue); }
.alert-dot.manana { background: #FF9500; }
.alert-dot.siguiente { background: var(--gray-text); }
.alert-table { min-width: 900px; }
.alert-actividad { max-width: 280px; white-space: normal; line-height: 1.4; }
.gestionar-result-btn { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--gray-line); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--white); color: var(--gray-text); transition: all 0.15s; }
.gestionar-result-btn.realizado.active { border-color: #00875A; background: #E6F7F2; color: #00875A; }
.gestionar-result-btn.cancelado.active { border-color: var(--red); background: var(--red-light); color: var(--red); }
.result-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.result-tag.realizado { background: #E6F7F2; color: #00875A; }
.result-tag.cancelado { background: var(--red-light); color: var(--red); }
.gestionar-client-card { background: var(--gray-bg); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.gestionar-client-name { font-size: 14px; font-weight: 700; color: var(--navy); }