/* ──────────────────────────────────────────────────────────────
chatello-base.css — Base visual comun de las webapps Chatello
FUENTE UNICA. No editar las copias por servicio: editar este
archivo y correr ./scripts/sync-frontend-shared.sh --apply
Que vive aca: lo que el manual de marca define igual para TODAS
las webapps — tokens de color, tipografia, layout sidebar+main,
y los componentes del catalogo oficial (card, tabla, badge, btn,
form, filtros, modal, login, paginador). Nada especifico de un
servicio: eso va en el app.css/estilo.css de cada uno.
Orden de carga obligatorio en el :
1. chatello-base.css (esto)
2. app.css / estilo.css del servicio (sus specifics)
3. theme-dark.css (SIEMPRE ultimo — pisa el :root)
CONTRATO DE ESTRUCTURA. La base implementa el patron scroll-area, asi
que la pagina debe tener esta forma o el contenido queda recortado sin
scroll (.main es overflow:hidden a proposito):
...
<- fijo
...
<- fijo
<- lo unico que scrollea
...
El login es la excepcion: devuelve altura
automatica y scroll.
Variante valida: sidebar `position:fixed` + `.main{margin-left:240px}`
(nomina-service, horarios-app). La base trae el sidebar EN FLUJO, que
es lo que usan cortes y encuestas; quien quiera la variante fija la
declara en su propio app.css.
Modo oscuro: NO se declara aca. theme-dark.css redefine estos
mismos tokens bajo prefers-color-scheme y ya trae los parches de
los selectores compartidos (.sidebar, .btn-primary, .card-header,
body.login-body). Duplicar un @media dark local rompe eso, porque
gana el que cargue ultimo y no siempre es el compartido.
────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');
:root {
/* ── Paleta corporativa (Pantone del manual de marca) ──
Unicos colores estructurales del chrome. */
--chatello-charcoal: #121619;
--chatello-gray: #2A2C2D;
--chatello-beige: #DBD2CB;
--chatello-beige-light: #ECE6E0;
--chatello-beige-soft: #F5F1ED;
--chatello-white: #FFFFFF;
/* ── Tokens semanticos ── */
--bg: #F5F1ED;
--surface: #FFFFFF;
--surface-2: #FAF7F4;
--border: #E2DAD2;
--border-strong: #C9BFB5;
--text: #121619;
--text-2: #4A4D50;
--muted: #7A7670;
--ok: #3E7B4F; --ok-bg: #E1EFE4;
--warn: #B4781B; --warn-bg: #FBEFD8;
--danger: #A62A1F; --danger-bg: #F8E1DD;
--info: #4A4D50; --info-bg: #ECE6E0;
--success: var(--ok); /* alias historico; algunos servicios lo usan */
/* ── Acento ──
En claro el acento es la tinta (charcoal sobre beige); theme-dark.css
lo INVIERTE en oscuro (beige sobre charcoal) y lo usa para parchear
.btn-primary. Sin estos tres en :root, ese parche no tiene contraparte
clara y el boton primario queda sin vocabulario comun. */
--accent: #121619;
--accent-hover: #2A2C2D;
--accent-text: #DBD2CB;
/* Radios: nombrados para que un cambio de redondeo sea un solo lugar. */
--radius: 10px;
--radius-sm: 6px;
/* ── Paleta por sucursal ──
Identifican sucursales, no son branding. Regla: SIEMPRE
acompanar el color con el texto del nombre (daltonismo, print,
lectores de pantalla). */
--suc-himno-dark: #1B5E20; --suc-himno-light: #E8F5E9; --suc-himno-med: #C8E6C9;
--suc-carr-dark: #0D47A1; --suc-carr-light: #E3F2FD; --suc-carr-med: #BBDEFB;
--suc-lomas-dark: #BF360C; --suc-lomas-light: #FBE9E7; --suc-lomas-med: #FFCCBC;
--suc-prod-dark: #4A148C; --suc-prod-light: #F3E5F5; --suc-prod-med: #E1BEE7;
--shadow-sm: 0 1px 2px rgba(18, 22, 25, 0.05);
--shadow: 0 4px 12px rgba(18, 22, 25, 0.08);
--shadow-lg: 0 12px 32px rgba(18, 22, 25, 0.18);
}
* { box-sizing: border-box; }
/* El body es el primer eslabon de la cadena flex del patron scroll-area:
altura ABSOLUTA y overflow:hidden, para que el unico elemento que scrollee
sea .scroll-area. `height:100%` NO sirve: no constrina a los hijos flex.
100dvh y no 100vh porque en mobile 100vh incluye la barra de URL. */
body {
margin: 0;
font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.55;
color: var(--text);
background: var(--bg);
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
}
h1, h2, h3, h4 { margin: 0 0 8px; color: var(--text); }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
h4 { font-size: 13px; font-weight: 600; }
p { margin: 0 0 8px; }
/* ── Layout sidebar 240px + main ─────────────────────────────────
Patron scroll-area: la pagina se parte en zona FIJA (titulo, filtros,
stats) y zona SCROLLEABLE (.scroll-area con las tablas), y los `th` van
sticky dentro de la scrollable. Es obligatorio en toda pagina con tabla
larga: sin esto, scrollear pierde el contexto del header.
Estructura esperada:
body > .layout > (.sidebar + .main > #page-content > .scroll-area)
`min-height: 0` hace falta en CADA nivel de la cadena flex. Sin eso los
flex items crecen con su contenido y no scrollea nada. */
.layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.sidebar {
width: 240px;
background: var(--chatello-charcoal);
color: var(--chatello-beige);
padding: 28px 20px 24px;
display: flex;
flex-direction: column;
flex-shrink: 0;
border-right: 1px solid var(--chatello-gray);
/* En ventanas bajas el menu es mas alto que el viewport: scrollear
por dentro, no desbordar el .layout. */
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.sidebar .brand { margin-bottom: 32px; }
.sidebar .brand img { display: block; width: 130px; height: auto; margin-bottom: 8px; }
.sidebar .brand h1 {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin: 12px 0 4px;
color: var(--chatello-beige);
}
.sidebar .brand .subtitle {
font-size: 11px;
color: rgba(219, 210, 203, 0.55);
}
.sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a {
padding: 11px 14px;
border-radius: 6px;
color: rgba(219, 210, 203, 0.78);
font-weight: 500;
text-decoration: none;
}
.sidebar nav a:hover { background: rgba(219, 210, 203, 0.08); color: var(--chatello-beige); }
.sidebar nav a.active {
background: var(--chatello-beige);
color: var(--chatello-charcoal);
font-weight: 600;
}
.sidebar .user {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid rgba(219, 210, 203, 0.12);
font-size: 12px;
}
.sidebar .user strong { display: block; }
.sidebar .user span { color: rgba(219, 210, 203, 0.55); }
/* Este estilo es para el