/* ==========================================================================
theme.css — Sistema visual global de sturge.cloud
Se carga en header.php justo después de Bootstrap. Redefine las variables
de Bootstrap y el aspecto base de cards, botones, tablas, badges y
formularios para todas las páginas. Los CSS de cada módulo van encima.
Tipografía: Inter (texto), Geist (títulos y cifras), Geist Mono (IDs,
fechas y montos). Superficies planas con borde fino, sin sombras pesadas.
========================================================================== */
:root {
/* Tipografía */
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Geist', 'Inter', system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
/* Neutros */
--ink: #18181b;
--ink-2: #3f3f46;
--muted: #71717a;
--muted-2: #a1a1aa;
--line: #ececee;
--line-strong: #e1e1e5;
--surface: #ffffff;
--surface-2: #f7f7f8;
--surface-3: #f1f1f3;
--canvas: #fafafa;
/* Acento (se redefine por empresa en body[data-company]) */
--accent: #18181b;
--accent-soft: #f4f4f5;
--accent-line: #e4e4e7;
/* Estados: fondo suave, texto y borde */
--ok: #067647; --ok-bg: #ecfdf3; --ok-line: #abefc6;
--warn: #b54708; --warn-bg: #fffaeb; --warn-line: #fedf89;
--bad: #b42318; --bad-bg: #fef3f2; --bad-line: #fecdca;
--info: #175cd3; --info-bg: #eff8ff; --info-line: #b2ddff;
--radius-sm: 8px;
--radius: 10px;
--radius-lg: 16px;
--shadow-pop: 0 12px 32px -8px rgba(24, 24, 27, .14), 0 2px 6px rgba(24, 24, 27, .05);
/* Variables de Bootstrap */
--bs-body-font-family: var(--font-sans);
--bs-body-color: var(--ink);
--bs-body-bg: var(--canvas);
--bs-emphasis-color: var(--ink);
--bs-secondary-color: var(--muted);
--bs-tertiary-bg: var(--surface-2);
--bs-border-color: var(--line);
--bs-border-radius: var(--radius);
--bs-border-radius-sm: var(--radius-sm);
--bs-border-radius-lg: var(--radius-lg);
--bs-border-radius-xl: 20px;
--bs-link-color: var(--ink);
--bs-link-color-rgb: 24, 24, 27;
--bs-link-hover-color: var(--ink-2);
--bs-link-hover-color-rgb: 63, 63, 70;
--bs-heading-color: inherit; /* los títulos heredan: blancos sobre cabeceras de color */
}
/* Identidad de cada empresa: color de marca (barras, puntos), versión profunda
(fondos con texto blanco, AA) y tinte suave. Se usan en todo el sistema. */
:root {
--jmb: #2f4fe0; --jmb-deep: #2340c8; --jmb-soft: #eef1fe; --jmb-line: #d3dafc;
--sturge: #f15124; --sturge-deep: #d4421a; --sturge-soft: #fff0ea; --sturge-line: #ffd3c2;
--ssi: #0e9aa7; --ssi-deep: #0b7c87; --ssi-soft: #e5f6f7; --ssi-line: #bde6ea;
}
.co-jmb { --co: var(--jmb); --co-deep: var(--jmb-deep); --co-soft: var(--jmb-soft); --co-line: var(--jmb-line); }
.co-sturge { --co: var(--sturge); --co-deep: var(--sturge-deep); --co-soft: var(--sturge-soft); --co-line: var(--sturge-line); }
.co-ssi { --co: var(--ssi); --co-deep: var(--ssi-deep); --co-soft: var(--ssi-soft); --co-line: var(--ssi-line); }
body[data-company="sturge"] { --accent: var(--sturge); --accent-soft: var(--sturge-soft); --accent-line: var(--sturge-line); }
body[data-company="jmb"] { --accent: var(--jmb); --accent-soft: var(--jmb-soft); --accent-line: var(--jmb-line); }
body[data-company="ssi"] { --accent: var(--ssi); --accent-soft: var(--ssi-soft); --accent-line: var(--ssi-line); }
/* --------------------------------------------------------------------------
Base
-------------------------------------------------------------------------- */
body {
font-family: var(--font-sans);
font-feature-settings: 'cv11', 'ss01';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--canvas);
color: var(--ink);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
font-family: var(--font-display);
letter-spacing: -.02em;
}
.text-muted { color: var(--muted) !important; }
/* Utilidades nuevas */
.font-mono, .mono { font-family: var(--font-mono); font-feature-settings: normal; letter-spacing: -.01em; }
.font-display { font-family: var(--font-display); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow {
font-family: var(--font-mono);
font-size: .72rem;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
::selection { background: var(--accent-soft); color: var(--ink); }
/* --------------------------------------------------------------------------
Cards: planas, borde fino, sin sombra
-------------------------------------------------------------------------- */
.card {
--bs-card-border-color: var(--line);
--bs-card-border-radius: var(--radius-lg);
--bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
--bs-card-cap-bg: var(--surface);
--bs-card-bg: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.card.border-0 { border: 1px solid var(--line) !important; }
.card.shadow-sm, .card.shadow { box-shadow: none !important; }
.card-header { border-bottom-color: var(--line); }
.card-footer { border-top-color: var(--line); }
/* --------------------------------------------------------------------------
Botones: pastilla suave, primario en tinta
-------------------------------------------------------------------------- */
.btn {
--bs-btn-font-weight: 500;
--bs-btn-border-radius: var(--radius);
--bs-btn-focus-box-shadow: 0 0 0 3px var(--accent-soft);
border-radius: var(--radius);
font-weight: 500;
letter-spacing: -.005em;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm { --bs-btn-border-radius: var(--radius-sm); border-radius: var(--radius-sm); }
.btn-primary, .btn-dark {
--bs-btn-bg: var(--ink);
--bs-btn-border-color: var(--ink);
--bs-btn-hover-bg: #27272a;
--bs-btn-hover-border-color: #27272a;
--bs-btn-active-bg: #09090b;
--bs-btn-active-border-color: #09090b;
--bs-btn-disabled-bg: #52525b;
--bs-btn-disabled-border-color: #52525b;
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
}
/* Secundario: relleno suave, nunca gris sólido */
.btn-secondary {
--bs-btn-color: var(--ink);
--bs-btn-bg: var(--surface-3);
--bs-btn-border-color: var(--surface-3);
--bs-btn-hover-color: var(--ink);
--bs-btn-hover-bg: #e4e4e7;
--bs-btn-hover-border-color: #e4e4e7;
--bs-btn-active-color: var(--ink);
--bs-btn-active-bg: #d4d4d8;
--bs-btn-active-border-color: #d4d4d8;
--bs-btn-disabled-color: var(--muted);
--bs-btn-disabled-bg: var(--surface-3);
--bs-btn-disabled-border-color: var(--surface-3);
}
.btn-light, .btn-outline-secondary, .btn-outline-dark {
--bs-btn-color: var(--ink);
--bs-btn-bg: var(--surface);
--bs-btn-border-color: var(--line-strong);
--bs-btn-hover-color: var(--ink);
--bs-btn-hover-bg: var(--surface-2);
--bs-btn-hover-border-color: #d4d4d8;
--bs-btn-active-color: var(--ink);
--bs-btn-active-bg: var(--surface-3);
--bs-btn-active-border-color: #d4d4d8;
}
/* Contornos de color: fondo blanco, borde gris y texto de color */
.btn-outline-primary { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: #d4d4d8; --bs-btn-active-bg: var(--surface-3); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: #d4d4d8; }
.btn-outline-success { --bs-btn-color: var(--ok); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: var(--ok-bg); --bs-btn-hover-color: var(--ok); --bs-btn-hover-border-color: var(--ok-line); }
.btn-outline-warning { --bs-btn-color: var(--warn); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: var(--warn-bg); --bs-btn-hover-color: var(--warn); --bs-btn-hover-border-color: var(--warn-line); }
.btn-outline-danger { --bs-btn-color: var(--bad); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: var(--bad-bg); --bs-btn-hover-color: var(--bad); --bs-btn-hover-border-color: var(--bad-line); }
.btn-outline-info { --bs-btn-color: var(--info); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: var(--info-bg); --bs-btn-hover-color: var(--info); --bs-btn-hover-border-color: var(--info-line); }
.btn-success { --bs-btn-bg: #12a150; --bs-btn-border-color: #12a150; --bs-btn-hover-bg: #0e8a44; --bs-btn-hover-border-color: #0e8a44; }
.btn-warning { --bs-btn-bg: #fdb022; --bs-btn-border-color: #fdb022; --bs-btn-hover-bg: #f79009; --bs-btn-hover-border-color: #f79009; --bs-btn-color: #3a2400; --bs-btn-hover-color: #3a2400; }
/* Botón de acento de la empresa */
.btn-accent {
--bs-btn-color: #fff; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
--bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
}
.btn-accent:hover { filter: brightness(.94); }
/* --------------------------------------------------------------------------
Badges: chips suaves con borde (reemplazan los bloques de color sólido)
-------------------------------------------------------------------------- */
.badge {
font-family: var(--font-sans);
font-weight: 500;
font-size: .75rem;
letter-spacing: 0;
padding: .28em .6em;
border-radius: 6px;
border: 1px solid transparent;
vertical-align: middle;
}
.badge.rounded-pill { border-radius: 999px !important; }
.badge.bg-success { background: var(--ok-bg) !important; color: var(--ok) !important; border-color: var(--ok-line); }
.badge.bg-warning { background: var(--warn-bg) !important; color: var(--warn) !important; border-color: var(--warn-line); }
.badge.bg-danger { background: var(--bad-bg) !important; color: var(--bad) !important; border-color: var(--bad-line); }
.badge.bg-info { background: var(--info-bg) !important; color: var(--info) !important; border-color: var(--info-line); }
.badge.bg-primary { background: var(--surface-3) !important; color: var(--ink) !important; border-color: var(--line-strong); }
.badge.bg-secondary,
.badge.bg-light { background: var(--surface) !important; color: var(--ink-2) !important; border-color: var(--line-strong); }
.badge.bg-dark { background: var(--ink) !important; color: #fff !important; }
/* Chip con punto de estado: Pagada */
.ui-chip {
display: inline-flex; align-items: center; gap: .4rem;
padding: .2rem .55rem;
font-size: .75rem; font-weight: 500; line-height: 1.3;
border-radius: 6px;
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--ink-2);
white-space: nowrap;
}
.ui-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ui-chip.ui-chip-plain::before { display: none; }
.ui-chip-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.ui-chip-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.ui-chip-bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.ui-chip-info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
/* Contador pequeño en mono (como el "05" junto a "Backlog") */
.count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.6rem; height: 1.35rem; padding: 0 .35rem;
font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums;
border-radius: 6px; border: 1px solid var(--line-strong);
background: var(--surface); color: var(--ink-2);
}
/* --------------------------------------------------------------------------
Tablas: encabezado discreto, filas aireadas y divisores finos
-------------------------------------------------------------------------- */
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--ink);
--bs-table-border-color: var(--line);
--bs-table-hover-bg: var(--surface-2);
--bs-table-hover-color: var(--ink);
--bs-table-striped-bg: #fbfbfc;
}
/* Inter es más ancha que Nunito: en tablas densas se usa 15px para que las de
muchas columnas sigan cabiendo en el contenedor (verificado a 1280 y 1024 px). */
.table { font-size: .9375rem; }
.table > :not(caption) > * > * { border-bottom-color: var(--line); }
.table-light { --bs-table-bg: var(--surface-2); --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
.table > tbody > tr:last-child > * { border-bottom-color: var(--line); }
/* --------------------------------------------------------------------------
Formularios
-------------------------------------------------------------------------- */
.form-control, .form-select {
border-color: var(--line-strong);
border-radius: var(--radius);
color: var(--ink);
background-color: var(--surface);
}
.form-control::placeholder { color: var(--muted-2); }
.form-control:focus, .form-select:focus {
border-color: #a1a1aa;
box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-label { color: var(--ink-2); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.input-group-text { background: var(--surface-2); border-color: var(--line-strong); color: var(--muted); }
/* --------------------------------------------------------------------------
Dropdowns, modales, alertas, acordeones, paginación
-------------------------------------------------------------------------- */
.dropdown-menu {
--bs-dropdown-font-size: .875rem;
--bs-dropdown-link-hover-bg: var(--surface-2);
--bs-dropdown-link-active-bg: var(--surface-3);
--bs-dropdown-link-active-color: var(--ink);
padding: .35rem;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
box-shadow: var(--shadow-pop) !important;
}
.dropdown-item { border-radius: 7px; padding: .45rem .65rem; }
.dropdown-item .bi { color: var(--muted-2); }
.modal-content { border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-pop); }
.modal-header { border-bottom-color: var(--line); }
.modal-footer { border-top-color: var(--line); }
.modal-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
.alert { border-radius: 12px; border-width: 1px; font-size: .9rem; }
.alert-success { --bs-alert-bg: var(--ok-bg); --bs-alert-color: var(--ok); --bs-alert-border-color: var(--ok-line); }
.alert-warning { --bs-alert-bg: var(--warn-bg); --bs-alert-color: var(--warn); --bs-alert-border-color: var(--warn-line); }
.alert-danger { --bs-alert-bg: var(--bad-bg); --bs-alert-color: var(--bad); --bs-alert-border-color: var(--bad-line); }
.alert-info { --bs-alert-bg: var(--info-bg); --bs-alert-color: var(--info); --bs-alert-border-color: var(--info-line); }
.alert-light { --bs-alert-bg: var(--surface-2); --bs-alert-color: var(--ink-2); --bs-alert-border-color: var(--line); }
.accordion {
--bs-accordion-border-color: var(--line);
--bs-accordion-active-bg: var(--surface-2);
--bs-accordion-active-color: var(--ink);
--bs-accordion-btn-focus-box-shadow: none;
--bs-accordion-btn-padding-x: 1.1rem;
}
.pagination { --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--line-strong); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--accent-soft); }
.nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--surface); }
.nav-tabs .nav-link { color: var(--muted); font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--ink); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ink); }
/* Barra superior (header.php) */
.app-navbar {
background: rgba(255, 255, 255, .88);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line);
}
.app-navbar .navbar-brand { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -.02em; }
.app-navbar .brand-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 8px;
background: var(--ink); color: #fff; font-size: .85rem;
}
.app-navbar .nav-link { color: var(--ink-2); font-weight: 500; border-radius: 8px; }
.app-navbar .nav-link:hover, .app-navbar .nav-link:focus { color: var(--ink); background: var(--surface-3); }
.app-navbar .nav-link.active, .app-navbar .nav-link.show { color: var(--ink); background: var(--surface-3); }
.app-navbar .nav-link .bi { color: var(--muted); }
.app-navbar .nav-user { color: var(--muted); }
.app-navbar .year-btn { font-family: var(--font-mono); font-size: .8rem; }
.app-navbar .navbar-toggler { border-color: var(--line-strong); }
/* Identidad de la empresa en la barra: franja superior en su color, selector
de empresa y enlace activo teñidos. Así siempre se sabe en qué empresa se trabaja. */
.app-navbar.has-co { border-top: 3px solid var(--co); background: color-mix(in srgb, var(--co-soft) 55%, rgba(255, 255, 255, .92)); border-bottom-color: var(--co-line); }
.app-navbar.has-co .nav-link:hover, .app-navbar.has-co .nav-link:focus { background: color-mix(in srgb, var(--co-soft) 60%, #fff); }
.app-navbar.has-co .nav-link.active, .app-navbar.has-co .nav-link.show { color: var(--co-deep); background: #fff; box-shadow: 0 0 0 1px var(--co-line); }
.app-navbar.has-co .nav-link.active .bi { color: var(--co); }
.app-navbar.has-co .brand-mark { background: var(--co); }
.app-navbar.has-co .user-avatar { background: var(--co-deep); }
.nav-company { margin-right: auto; margin-left: -.35rem; }
.nav-company__btn {
display: inline-flex; align-items: center; gap: .35rem;
height: 28px; padding: 0 .6rem; border: 0; border-radius: 8px;
font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
color: #fff; background: var(--co);
}
.nav-company__btn:hover, .nav-company__btn[aria-expanded="true"] { background: var(--co-deep); }
.nav-company__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-company__btn.dropdown-toggle::after { margin-left: .15rem; vertical-align: .12em; }
.nav-company .dropdown-menu form { margin: 0; }
.nav-company__item { display: flex; align-items: center; gap: .55rem; }
.nav-company__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--co); flex-shrink: 0; }
.nav-company__item.active { color: var(--co-deep); background: var(--co-soft); font-weight: 600; }
@media (min-width: 1200px) { .nav-company { margin-right: 0; } }
@media (max-width: 1279.98px) and (min-width: 1200px) { .app-navbar .brand-name { display: none; } }
/* ==========================================================================
Componentes reutilizables
========================================================================== */
.text-ink-2 { color: var(--ink-2) !important; }
.fw-medium { font-weight: 500 !important; }
/* Encabezado de página: eyebrow + título + acciones */
.page-head {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 1rem 1.5rem;
padding: .5rem 0 1.5rem;
}
.page-title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.2vw + 1.2rem, 2.25rem);
font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
margin: .35rem 0 .35rem;
}
.page-sub { color: var(--muted); margin: 0; font-size: .9375rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-actions .btn, .panel-head .btn { display: inline-flex; align-items: center; gap: .45rem; }
/* KPI: tarjeta enlazable con cifra grande */
.ui-kpi {
display: flex; flex-direction: column; gap: .75rem;
height: 100%;
padding: 1.25rem 1.35rem 1.1rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
color: var(--ink); text-decoration: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-kpi:hover { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 4px 16px -6px rgba(24, 24, 27, .08); color: var(--ink); }
.ui-kpi-label { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--muted); }
.ui-kpi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.ui-kpi-dot-ok { background: #17b26a; }
.ui-kpi-dot-warn { background: #f79009; }
.ui-kpi-dot-bad { background: #f04438; }
.ui-kpi-dot-accent { background: var(--accent); }
.ui-kpi-value {
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.4vw + 1.1rem, 2.25rem);
font-weight: 500; letter-spacing: -.035em; line-height: 1;
font-variant-numeric: tabular-nums;
}
.ui-kpi-value small { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: .4rem; }
.ui-kpi-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; font-size: .8125rem; color: var(--muted); }
.ui-kpi-link { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.ui-kpi:hover .ui-kpi-link { color: var(--ink); }
.ui-kpi-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.ui-kpi-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
/* Panel: card con cabecera limpia */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.panel-head {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
padding: 1.1rem 1.35rem;
}
.panel-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.panel-sub { margin: .15rem 0 0; font-size: .8125rem; color: var(--muted); }
.panel-figure { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.panel-body { padding: 1.1rem 1.35rem 1.35rem; }
/* Estado vacío */
.ui-empty-state {
display: flex; align-items: center; justify-content: center; gap: .6rem;
padding: 2rem 1rem;
border: 1px dashed var(--line-strong); border-radius: 12px;
background: var(--surface-2);
color: var(--muted); font-size: .875rem;
}
.ui-empty-state .bi { color: #17b26a; font-size: 1.1rem; }
/* Grupos colapsables con encabezado teñido (tipo "Backlog / In progress / Done") */
.month-groups { display: flex; flex-direction: column; gap: .5rem; }
.month-head {
display: flex; align-items: center; gap: .65rem; width: 100%;
padding: .7rem 1rem;
background: var(--surface-2);
border: 1px solid transparent; border-radius: 12px;
color: var(--ink); font: inherit; text-align: left;
transition: background-color .15s ease;
}
.month-head:hover { background: var(--surface-3); }
.month-head:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.month-dot { width: 10px; height: 10px; border-radius: 50%; background: #17b26a; flex-shrink: 0; }
.month-group.has-due .month-head { background: #fff8ef; }
.month-group.has-due .month-head:hover { background: #fff1e0; }
.month-group.has-due .month-dot { background: #f79009; }
.month-name { font-size: .9375rem; font-weight: 600; }
.month-meta { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.month-total { font-size: .9375rem; font-weight: 600; min-width: 6.5rem; text-align: right; font-family: inherit; font-variant-numeric: tabular-nums; }
.month-chevron { color: var(--muted); transition: transform .2s ease; }
.month-head:not(.collapsed) .month-chevron { transform: rotate(180deg); }
.month-group .collapse > .table-responsive, .month-group .collapsing > .table-responsive { padding: .25rem 0 .5rem; }
/* Móvil: punto, nombre, contador, "N por pagar", total y chevron no caben en una línea
y desbordaban la tarjeta (dashboards JMB, Sturge y SSI). Se compacta y el bloque
de la derecha puede bajar de línea; el total pierde su ancho mínimo de 6.5rem. */
@media (max-width: 575.98px) {
.month-head { gap: .5rem; padding: .65rem .75rem; flex-wrap: wrap; }
.month-meta { flex-wrap: wrap; justify-content: flex-end; gap: .4rem; min-width: 0; }
.month-total { min-width: 0; }
}
/* Tabla limpia: sin fondo en cabecera, IDs en mono tenue */
.table-clean { font-variant-numeric: tabular-nums; }
.table-clean > :not(caption) > * > * { padding: .75rem .9rem; }
.table-clean.table-sm > :not(caption) > * > * { padding: .55rem .9rem; }
.table-clean > thead > tr > th {
--bs-table-bg: transparent; background: transparent;
color: var(--muted); font-weight: 500; font-size: .8125rem;
border-bottom: 1px solid var(--line); padding-top: .6rem; padding-bottom: .6rem; white-space: nowrap;
}
.table-clean > tfoot > tr > td, .table-clean > tfoot > tr > th { border-bottom: 0; }
.table-clean > tbody > tr > td { padding-top: .8rem; padding-bottom: .8rem; }
.table-clean > tbody > tr:last-child > td { border-bottom: 0; }
.table-clean > tfoot > tr > td { border-top: 1px solid var(--line); padding-top: .85rem; }
.table-clean .col-id { color: var(--muted-2); width: 1%; white-space: nowrap; padding-right: 2rem; }
.table-clean .mono { font-family: inherit; font-size: inherit; letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* Botón de ícono fantasma */
.ui-btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px;
color: var(--muted); text-decoration: none;
border: 1px solid transparent;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ui-btn-icon:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
/* Avatar de iniciales */
.ui-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: var(--accent-soft); color: var(--accent);
font-size: .75rem; font-weight: 600; flex-shrink: 0;
}
.app-navbar .user-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: var(--accent); color: #fff;
font-size: .7rem; font-weight: 600;
}
.app-navbar .nav-user { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-2); }
.app-navbar .dropdown-divider { border-color: var(--line); margin: .3rem 0; }
/* El tamaño del menú de escritorio escala con la pantalla (ver header.php) */
/* ==========================================================================
Fase 0 · Fundamentos globales
========================================================================== */
/* --- Modales -------------------------------------------------------------
Las cabeceras de color sólido (bg-primary/info/success text-white) pasan a
blancas; peligro y advertencia conservan un tinte suave como señal. */
.modal-backdrop.show { opacity: .32; }
.modal-backdrop { background-color: #09090b; }
.modal-content { overflow: hidden; }
.modal-header { padding: 1rem 1.35rem; background: var(--surface); }
.modal-header .modal-title { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.modal-header .modal-title .bi { color: var(--muted); }
.modal-body { padding: 1.25rem 1.35rem; }
.modal-footer { padding: .85rem 1.35rem; background: var(--surface-2); gap: .5rem; }
.modal-footer > * { margin: 0; }
.modal-header[class*="bg-"] { background: var(--surface) !important; color: var(--ink) !important; }
.modal-header.text-white, .modal-header .text-white { color: var(--ink) !important; }
.modal-header.bg-danger, .modal-header.bg-danger-subtle { background: var(--bad-bg) !important; border-bottom-color: var(--bad-line) !important; }
.modal-header.bg-danger .modal-title, .modal-header.bg-danger-subtle .modal-title,
.modal-header.bg-danger .modal-title .bi { color: var(--bad) !important; }
.modal-header.bg-warning, .modal-header.bg-warning-subtle { background: var(--warn-bg) !important; border-bottom-color: var(--warn-line) !important; }
.modal-header.bg-warning .modal-title, .modal-header.bg-warning-subtle .modal-title,
.modal-header.bg-warning .modal-title .bi { color: var(--warn) !important; }
.modal-header.bg-success-subtle { background: var(--surface) !important; }
.modal-header.bg-light { background: var(--surface) !important; }
/* El botón de cerrar blanco vuelve a ser oscuro sobre cabeceras claras */
.modal-header .btn-close-white { filter: none; }
.btn-close { opacity: .45; }
.btn-close:hover { opacity: .8; }
.btn-close:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
/* --- Cabeceras de tabla con color ---------------------------------------- */
.table > thead.table-primary > tr > th,
.table > thead.table-success > tr > th,
.table > thead.table-info > tr > th,
.table > thead.table-dark > tr > th { --bs-table-bg: transparent; background: transparent; color: var(--muted); }
/* --- Cards: cabecera y pie consistentes ---------------------------------- */
.card-footer { background: var(--surface-2); }
.card-body > .table-responsive:first-child:last-child > .table { margin-bottom: 0; }
/* --- Formularios: tamaños chicos y grupos --------------------------------- */
.form-control-sm, .form-select-sm { border-radius: var(--radius-sm); }
.form-text { color: var(--muted); font-size: .78rem; }
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); }
.form-check-input { border-color: #d4d4d8; }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-soft); border-color: #a1a1aa; }
.form-switch .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: #f97066; }
/* --- List groups, tooltips, popovers, progress ---------------------------- */
.list-group { --bs-list-group-border-color: var(--line); --bs-list-group-action-hover-bg: var(--surface-2); --bs-list-group-active-bg: var(--ink); --bs-list-group-active-border-color: var(--ink); }
.tooltip { --bs-tooltip-bg: var(--ink); --bs-tooltip-font-size: .78rem; --bs-tooltip-border-radius: 7px; }
.popover { --bs-popover-border-color: var(--line); --bs-popover-border-radius: 12px; --bs-popover-box-shadow: var(--shadow-pop); }
.progress { --bs-progress-bg: var(--surface-3); --bs-progress-border-radius: 99px; --bs-progress-bar-bg: var(--ink); }
.toast { --bs-toast-border-radius: 12px; --bs-toast-border-color: var(--line); --bs-toast-box-shadow: var(--shadow-pop); }
/* --- Mensaje de sesión (header.php) --------------------------------------- */
.session-alert { display: flex; align-items: center; gap: .6rem; }
.session-alert .bi { font-size: 1rem; }
/* --- Flatpickr ------------------------------------------------------------ */
.flatpickr-calendar {
font-family: var(--font-sans);
border: 1px solid var(--line) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-pop) !important;
padding: .25rem;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months .flatpickr-month { height: 40px; }
.flatpickr-current-month { font-size: .95rem; font-weight: 600; padding-top: 8px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { padding: 12px; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ink); }
span.flatpickr-weekday { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; color: var(--muted-2); }
.flatpickr-day { border-radius: 8px; font-size: .84rem; color: var(--ink); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--surface-3); border-color: transparent; }
.flatpickr-day.today { border-color: var(--accent); }
.flatpickr-day.today:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--ink); border-color: var(--ink); color: #fff; }
.flatpickr-day.inRange { background: var(--surface-3); box-shadow: -5px 0 0 var(--surface-3), 5px 0 0 var(--surface-3); border-color: transparent; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--muted-2); }
.flatpickr-input[readonly] { background-color: var(--surface); }
/* --- Banner de instalación PWA (footer.php) ------------------------------- */
.pwa-banner {
position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
display: none; align-items: center; justify-content: space-between; gap: .75rem;
padding: .75rem .9rem .75rem 1.1rem;
background: var(--ink); color: #fff;
border-radius: 14px; box-shadow: var(--shadow-pop);
font-size: .875rem;
}
.pwa-banner .btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; }
.pwa-banner .btn-link { color: #d4d4d8; text-decoration: none; }
/* --- Gráficos ------------------------------------------------------------- */
.chart-box { position: relative; width: 100%; height: 300px; }
@media (max-width: 575.98px) { .chart-box { height: 220px; } }
/* --- Scrollbars discretos (escritorio) ------------------------------------ */
@media (hover: hover) {
* { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }
}
/* Dato destacado a la derecha de la cabecera de un panel; en móvil baja y se alinea a la izquierda */
.panel-aside { text-align: right; }
@media (max-width: 575.98px) {
.panel-aside { text-align: left; width: 100%; }
}
/* --------------------------------------------------------------------------
Identidad de empresa: punto y botón en el color de la empresa (.co-*)
-------------------------------------------------------------------------- */
/* Punto de color de empresa */
.co-dot {
display: inline-block; flex-shrink: 0;
width: 9px; height: 9px; border-radius: 3px;
background: var(--co, var(--muted-2));
margin-right: .45rem; vertical-align: .05em;
}
.btn-company {
--bs-btn-color: #fff; --bs-btn-bg: var(--co-deep); --bs-btn-border-color: var(--co-deep);
--bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--co-deep); --bs-btn-hover-border-color: var(--co-deep);
--bs-btn-active-color: #fff; --bs-btn-active-bg: var(--co-deep); --bs-btn-active-border-color: var(--co-deep);
--bs-btn-focus-box-shadow: 0 0 0 4px var(--co-line);
display: flex; align-items: center; justify-content: center; gap: .55rem;
padding: .72rem 1rem; border-radius: 12px;
font-weight: 600; font-size: .95rem;
}
.btn-company:hover { filter: brightness(1.08); }
.btn-company .bi { transition: transform .2s ease; }
.btn-company:hover .bi { transform: translateX(3px); }
/* ==========================================================================
Dashboards de empresa (dashboard_jmb / _ssi / _sturge)
La página es la carpeta de la empresa, abierta: su pestaña de color arriba y
el color de la empresa (--co) solo como identidad; las cifras van en tinta.
========================================================================== */
.min-w-0 { min-width: 0; }
.co-head {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 1rem 1.5rem; padding: .5rem 0 1.5rem;
}
.co-head__tab {
display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
border-radius: 8px; background: var(--co-deep); color: #fff;
font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
}
.co-head__title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.2vw + 1.2rem, 2.35rem);
font-weight: 600; letter-spacing: -.035em; line-height: 1.05;
margin: .6rem 0 .35rem;
}
.co-head__sub { color: var(--muted); margin: 0; }
.co-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.co-head__actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.co-head__actions .btn-company { padding: .5rem 1rem; font-size: .9375rem; }
.co-panel {
height: 100%; display: flex; flex-direction: column; gap: .45rem;
padding: 1.35rem 1.5rem 1.1rem;
background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.co-panel__label { font-size: .875rem; color: var(--muted); }
.co-panel__figure {
font-family: var(--font-display);
font-size: clamp(2rem, 1.4vw + 1.2rem, 2.6rem);
font-weight: 600; letter-spacing: -.04em; line-height: 1.05;
font-variant-numeric: tabular-nums;
}
.co-panel__figure.is-neg { color: var(--bad); }
.co-panel__caption { font-size: .8125rem; color: var(--muted); }
.co-bar { display: block; height: 10px; margin-top: .45rem; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.co-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--co-deep, var(--ink)); }
.co-bar--ink > span { background: var(--ink); }
.co-rows { margin: .7rem 0 0; border-top: 1px solid var(--line); }
.co-rows > div {
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.co-rows > div:last-child { border-bottom: 0; padding-bottom: .1rem; }
.co-rows dt { font-weight: 400; color: var(--ink-2); font-size: .9rem; }
.co-rows dt a { color: inherit; text-decoration: none; }
.co-rows dt a .bi { font-size: .75rem; color: var(--muted-2); margin-left: .15rem; }
.co-rows dt a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.co-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-rows dd.is-muted { color: var(--muted); font-weight: 500; }
.co-rows dd.is-due::before {
content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: #f79009; margin-right: .45rem; vertical-align: .08em;
}
/* Aviso de entregas sin facturar */
.co-notice {
display: flex; align-items: center; gap: 1rem;
padding: .9rem 1.1rem;
background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.co-notice__icon {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 40px; height: 40px; border-radius: 11px;
background: var(--warn-bg); color: var(--warn); font-size: 1.1rem;
}
.co-notice__text { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.co-notice__text > strong { font-weight: 600; }
.co-notice__text > span { font-size: .8125rem; color: var(--muted); }
.co-notice__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.co-notice__chip {
display: inline-flex; gap: .35rem; padding: .15rem .5rem;
border: 1px solid var(--line-strong); border-radius: 6px;
font-size: .75rem; font-weight: 600; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
}
.co-notice__chip span { font-weight: 400; color: var(--muted); }
.co-notice__chip:hover { background: var(--surface-2); color: var(--ink); }
.co-notice__go { flex-shrink: 0; }
/* Secciones plegables de la página */
.co-sections { --bs-accordion-bg: var(--surface); --bs-accordion-border-radius: 16px; --bs-accordion-inner-border-radius: 15px; }
.co-sections > .accordion-item {
border: 1px solid var(--line) !important; border-radius: 16px !important;
box-shadow: none !important; overflow: hidden; margin-bottom: .75rem !important;
}
.co-sections > .accordion-item > .accordion-header .accordion-button {
padding: 1rem 1.35rem; background: var(--surface); box-shadow: none;
font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.co-sections > .accordion-item > .accordion-header .accordion-button:not(.collapsed) { border-bottom: 1px solid var(--line); }
.co-sections > .accordion-item > .accordion-collapse > .accordion-body { padding: 1.1rem 1.35rem 1.35rem; }
.co-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; margin-bottom: 1.25rem; }
.co-toolbar__label { font-size: .8125rem; color: var(--muted); margin-right: .25rem; }
.co-toolbar .btn { display: inline-flex; align-items: center; }
.co-toolbar .vr { display: none !important; }
/* Cabecera de cada mes dentro de "Todas las facturas" */
.co-month-head { margin: 1.75rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.co-sections .accordion-body > .co-toolbar + * .co-month-head:first-child,
.co-month-head:first-of-type { }
.co-month-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin: 0; }
/* Tabla mensual: densa pero legible; cifras alineadas y sin cortes */
.co-ledger { font-size: .8125rem; --bs-table-hover-bg: var(--surface-2); margin-bottom: 0; }
/* Monto negativo en la tabla mensual y su resumen: negrita sobre amarillo, el signo va primero (−$3.72) */
.co-neg { font-weight: 700; background: #fde68a; color: #b91c1c; padding: .05em .3em; border-radius: 4px; white-space: nowrap; box-decoration-break: clone; }
.co-ledger > :not(caption) > * > * { padding: .45rem .3rem; vertical-align: middle; }
.co-ledger > thead > tr > th {
font-size: .72rem; font-weight: 500; color: var(--muted); line-height: 1.2;
vertical-align: bottom; border-bottom: 1px solid var(--line-strong);
}
/* Sin nowrap: una cifra no tiene espacios y no se parte; las notas debajo sí deben poder partirse */
.co-ledger td.text-end, .co-ledger th.text-end { font-variant-numeric: tabular-nums; }
.co-ledger > tbody > tr > td:nth-child(3) { min-width: 7rem; max-width: 13rem; line-height: 1.3; }
.co-sections { --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); }
.co-sections .accordion-body.p-0 { padding: .35rem .75rem .75rem !important; }
/* Acciones dentro de tablas: discretas, solo el ícono tiene peso */
.co-sections .table .btn-sm {
--bs-btn-bg: var(--surface); --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--line-strong);
--bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: #d4d4d8;
--bs-btn-active-bg: var(--surface-3); --bs-btn-active-color: var(--ink);
--bs-btn-padding-y: .2rem; --bs-btn-padding-x: .45rem;
}
/* Tablas de las secciones: encabezado discreto como la tabla mensual y filas de
alerta con un tinte leve (el chip de antigüedad o estado ya comunica la alerta) */
.co-sections .table > thead > tr > th {
font-size: .75rem; font-weight: 500; color: var(--muted);
background: transparent; border-bottom: 1px solid var(--line-strong);
}
.co-sections .table > tbody > tr.table-danger > * { --bs-table-bg: #fff6f5; --bs-table-striped-bg: #fff6f5; }
.co-sections .table > tbody > tr.table-warning > * { --bs-table-bg: #fffcf2; --bs-table-striped-bg: #fffcf2; }
@media (max-width: 575.98px) {
.co-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.co-toolbar__label { grid-column: 1 / -1; }
.co-toolbar .btn { justify-content: center; }
.co-toolbar .btn:last-child { grid-column: 1 / -1; }
.co-head__actions { width: 100%; }
.co-head__actions .btn { flex: 1; justify-content: center; }
}
/* Lista móvil dentro de las secciones: la línea de datos puede partirse en dos
para no cortar el saldo en pantallas angostas */
.co-sections .mlist .mlist-line2 { flex-wrap: wrap; row-gap: .1rem; white-space: normal; }
.co-sections .dash-total-contable-card {
border: 1px solid var(--line) !important; background: var(--surface-2) !important; box-shadow: none !important;
}
/* --- Teclado en pantalla abierto (footer.php marca html.teclado-abierto) ---
El modal abierto ocupa solo lo que queda visible sobre el teclado, así su pie
(Guardar, Aplicar, Cancelar) no queda tapado; los modales largos se desplazan
por dentro. Las barras fijas de abajo se esconden mientras se escribe. */
.teclado-abierto .modal.show { top: var(--vv-top, 0); height: var(--vv-alto, 100%); }
/* Todo modal se comporta como «scrollable»: cabecera y pie fijos, el cuerpo se
desplaza (también cuando un