/* ==========================================================================
TEODOLIA™ — Tokens de identidad y capa sobre Bootstrap 5.3
Archivo único compartido por app.teodolia.mx (y, a futuro, teodolia.mx).
Uso en la app (base.html, base_obra.html y login.html), DESPUÉS de
bootstrap.min.css para que estas reglas ganen:
Las fuentes se sirven desde cdn.jsdelivr.net, que la CSP actual de la app
ya permite en style-src y font-src. No hay que tocar la política.
Regla: ningún color se escribe a mano en plantillas. Todo sale de aquí.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens de marca (mismos nombres y valores que la landing)
-------------------------------------------------------------------------- */
:root{
/* Estructura — familia del azul de plano */
--tinta: #14213D; /* texto principal, botones, barra lateral */
--tinta-alta: #0D1729; /* fondos más profundos, pie */
--tinta-media: #243B63; /* hover de botones, estados */
--linea-oscura: #2C3E63; /* divisores sobre fondo oscuro */
/* Superficie */
--papel: #F2F3F1; /* fondo general */
--papel-alto: #FAFAF9; /* tarjetas, paneles */
--linea: #D6D9D4; /* bordes y divisores sobre claro */
/* Acento — latón del instrumento */
--laton: #A8813C; /* acento gráfico: reglas, íconos, foco. NO para texto chico */
--laton-claro: #C9A961; /* acento sobre fondo oscuro (7.1:1 sobre tinta) */
--laton-texto: #7A5C24; /* latón legible como texto sobre blanco (6.2:1) */
/* Texto secundario */
--grafito: #59606E; /* 6.3:1 sobre blanco */
/* Semántica funcional — solo para estado, nunca decorativa */
--oxido: #9C3B22; /* desviación, error, rechazo (6.9:1) */
--verde: #2E6B4F; /* aprobado, dentro de presupuesto (6.3:1) */
/* Color del logotipo oficial (v2.11.42): P1 petróleo, el del SVG entregado por el diseño.
Solo lo usa el logotipo; la paleta de la interfaz no cambia con él. */
--marca: #14353D;
/* Tipografía */
--fuente-texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--fuente-cifra: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
--radio: 4px;
}
/* --------------------------------------------------------------------------
2. Variables globales de Bootstrap 5.3 → tokens TEODOLIA
-------------------------------------------------------------------------- */
:root{
--bs-body-font-family: var(--fuente-texto);
--bs-body-color: var(--tinta);
--bs-body-color-rgb: 20, 33, 61;
--bs-body-bg: var(--papel);
--bs-body-bg-rgb: 242, 243, 241;
--bs-secondary-color: var(--grafito);
--bs-secondary-color-rgb: 89, 96, 110;
--bs-emphasis-color: var(--tinta-alta);
--bs-border-color: var(--linea);
--bs-border-radius: var(--radio);
--bs-primary: #14213D; --bs-primary-rgb: 20, 33, 61;
--bs-secondary: #59606E; --bs-secondary-rgb: 89, 96, 110;
--bs-success: #2E6B4F; --bs-success-rgb: 46, 107, 79;
--bs-danger: #9C3B22; --bs-danger-rgb: 156, 59, 34;
--bs-warning: #C9A961; --bs-warning-rgb: 201, 169, 97;
--bs-info: #243B63; --bs-info-rgb: 36, 59, 99;
--bs-dark: #0D1729; --bs-dark-rgb: 13, 23, 41;
--bs-light: #FAFAF9; --bs-light-rgb: 250, 250, 249;
--bs-primary-text-emphasis: #14213D;
--bs-primary-bg-subtle: #E6E9EF;
--bs-primary-border-subtle: #B9C1D1;
--bs-success-text-emphasis: #234F3B;
--bs-success-bg-subtle: #E3EEE8;
--bs-success-border-subtle: #B5D0C2;
--bs-danger-text-emphasis: #7A2E1A;
--bs-danger-bg-subtle: #F4E4DF;
--bs-danger-border-subtle: #DDB3A7;
--bs-warning-text-emphasis: #6E5320;
--bs-warning-bg-subtle: #F5EEDD;
--bs-warning-border-subtle: #E2CF9F;
--bs-info-text-emphasis: #243B63;
--bs-info-bg-subtle: #E6EAF2;
--bs-info-border-subtle: #B7C2D6;
/* Enlaces: tinta con subrayado latón (igual que el botón «Acceder» de la landing) */
--bs-link-color: var(--tinta);
--bs-link-color-rgb: 20, 33, 61;
--bs-link-hover-color: var(--laton-texto);
--bs-link-hover-color-rgb: 122, 92, 36;
--bs-link-decoration: underline;
/* Anillo de foco: latón, coherente con la landing */
--bs-focus-ring-color: rgba(168, 129, 60, .35);
}
body{ -webkit-font-smoothing: antialiased; }
a{ text-decoration-color: var(--laton); text-underline-offset: 3px; }
/* --------------------------------------------------------------------------
3. Componentes de Bootstrap que traen el azul #0D6EFD escrito a mano
-------------------------------------------------------------------------- */
.btn-primary{
--bs-btn-bg: var(--tinta);
--bs-btn-border-color: var(--tinta);
--bs-btn-hover-bg: var(--tinta-media);
--bs-btn-hover-border-color: var(--tinta-media);
--bs-btn-active-bg: var(--tinta-alta);
--bs-btn-active-border-color: var(--tinta-alta);
--bs-btn-disabled-bg: var(--tinta);
--bs-btn-disabled-border-color: var(--tinta);
--bs-btn-focus-shadow-rgb: 168, 129, 60;
}
.btn-outline-primary{
--bs-btn-color: var(--tinta);
--bs-btn-border-color: var(--tinta);
--bs-btn-hover-bg: var(--tinta);
--bs-btn-hover-border-color: var(--tinta);
--bs-btn-active-bg: var(--tinta-alta);
--bs-btn-focus-shadow-rgb: 168, 129, 60;
}
.btn-success{ --bs-btn-bg: var(--verde); --bs-btn-border-color: var(--verde); --bs-btn-hover-bg: #234F3B; --bs-btn-hover-border-color: #234F3B; }
.btn-danger { --bs-btn-bg: var(--oxido); --bs-btn-border-color: var(--oxido); --bs-btn-hover-bg: #7A2E1A; --bs-btn-hover-border-color: #7A2E1A; }
.btn-warning{ --bs-btn-color: var(--tinta); --bs-btn-bg: var(--laton-claro); --bs-btn-border-color: var(--laton-claro); --bs-btn-hover-color: var(--tinta); --bs-btn-hover-bg: var(--laton); --bs-btn-hover-border-color: var(--laton); }
.form-control:focus,
.form-select:focus{
border-color: var(--laton);
box-shadow: 0 0 0 .2rem rgba(168, 129, 60, .25);
}
.form-check-input:checked{ background-color: var(--tinta); border-color: var(--tinta); }
.form-check-input:focus{ border-color: var(--laton); box-shadow: 0 0 0 .2rem rgba(168, 129, 60, .25); }
/* Autorrelleno del navegador: evita el fondo azul claro en el login */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
-webkit-text-fill-color: var(--tinta);
-webkit-box-shadow: 0 0 0 1000px var(--papel-alto) inset;
transition: background-color 9999s ease-out 0s;
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--tinta); }
.nav-link { --bs-nav-link-color: var(--tinta); --bs-nav-link-hover-color: var(--laton-texto); }
.pagination { --bs-pagination-color: var(--tinta); --bs-pagination-active-bg: var(--tinta); --bs-pagination-active-border-color: var(--tinta); --bs-pagination-hover-color: var(--laton-texto); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(168,129,60,.25); }
.dropdown-menu{ --bs-dropdown-link-active-bg: var(--tinta); }
.list-group { --bs-list-group-active-bg: var(--tinta); --bs-list-group-active-border-color: var(--tinta); }
.progress { --bs-progress-bar-bg: var(--laton); }
.accordion { --bs-accordion-active-color: var(--tinta); --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(168,129,60,.25); }
.table { --bs-table-color: var(--tinta); --bs-table-border-color: var(--linea); }
/* --------------------------------------------------------------------------
4. Cifras: montos, porcentajes y volúmenes alineados
Aplicar .cifra a celdas de importes, o .table-cifras a la tabla completa.
-------------------------------------------------------------------------- */
.cifra,
.table-cifras td.text-end,
.table-cifras th.text-end{
font-family: var(--fuente-cifra);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* --------------------------------------------------------------------------
5. Superficies de identidad
-------------------------------------------------------------------------- */
/* Fondo de la pantalla de acceso: dentro de la familia de la tinta,
sustituye el degradado #1A3557 → #2E6DA4 que salía de la paleta. */
.fondo-acceso{
background: linear-gradient(150deg, var(--tinta-alta) 0%, var(--tinta) 55%, var(--tinta-media) 100%);
}
/* Barra lateral oscura: el logotipo va en NEGATIVO (papel), no en recuadro. */
.sidebar,
.barra-lateral{
--bs-body-color: var(--papel);
background: var(--tinta);
color: var(--papel);
}
.sidebar .nav-link,
.barra-lateral .nav-link{ color: #BAC5D9; }
.sidebar .nav-link:hover,
.barra-lateral .nav-link:hover,
.sidebar .nav-link.active,
.barra-lateral .nav-link.active{ color: var(--papel); }
.sidebar .nav-link.active,
.barra-lateral .nav-link.active{ box-shadow: inset 3px 0 0 var(--laton-claro); }
/* Logotipo como SVG de un solo trazo con fill="currentColor":
el contexto decide la tinta. */
.logo { color: var(--marca); }
.sidebar .logo,
.barra-lateral .logo,
.fondo-oscuro .logo{ color: var(--papel); }
/* ™ separable: se sustituye por ® solo cuando IMPI conceda el registro. */
.marca-tm{ font-size: .5em; vertical-align: super; font-weight: 500; color: var(--grafito); }
.sidebar .marca-tm,
.barra-lateral .marca-tm{ color: #8E9BB4; }
/* --------------------------------------------------------------------------
6. Capa de la app (v2.11.36, A4)
Compatibilidad: las plantillas anteriores usan --oc-*; apuntan a los tokens.
El acento de texto es el latón legible (los montos en latón son texto).
-------------------------------------------------------------------------- */
:root{
--oc-primary: var(--tinta);
--oc-secondary: var(--tinta-media);
--oc-accent: var(--laton-texto);
--oc-sidebar: var(--tinta);
--oc-green: var(--verde);
--oc-red: var(--oxido);
}
body{ background: var(--papel); color: var(--tinta); font-family: var(--fuente-texto); }
h1, h2, h3, h4, h5, h6{ color: var(--tinta); }
.card{ --bs-card-bg: var(--papel-alto); --bs-card-border-color: var(--linea); --bs-card-cap-bg: var(--papel-alto); }
.modal{ --bs-modal-bg: var(--papel-alto); }
.badge.text-bg-primary, .text-bg-primary{ color: var(--papel) !important; }
.text-bg-warning{ color: var(--tinta) !important; }
.btn-outline-secondary{ --bs-btn-color: var(--grafito); --bs-btn-border-color: var(--linea); --bs-btn-hover-bg: var(--tinta); --bs-btn-hover-border-color: var(--tinta); --bs-btn-hover-color: var(--papel); }
.btn-info{ --bs-btn-color: var(--papel); --bs-btn-bg: var(--tinta-media); --bs-btn-border-color: var(--tinta-media); --bs-btn-hover-color: var(--papel); --bs-btn-hover-bg: var(--tinta); --bs-btn-hover-border-color: var(--tinta); }
/* Barra lateral de la app (#sidebar): tinta, enlaces claros y activo con regla de latón */
#sidebar{ background: var(--tinta); }
#sidebar .brand{ border-bottom: 1px solid var(--linea-oscura); }
#sidebar .brand h6{ color: var(--papel); }
#sidebar .brand small{ color: #8E9BB4; }
#sidebar .nav-link{ color: #BAC5D9; }
#sidebar .nav-link:hover{ background: rgba(242, 243, 241, .06); color: var(--papel); }
#sidebar .nav-link.active{ background: rgba(242, 243, 241, .08); color: var(--papel); box-shadow: inset 3px 0 0 var(--laton-claro); }
#sidebar .nav-link.text-danger{ color: #E3A08E !important; }
#sidebar .nav-section{ color: #8E9BB4; }
#sidebar .back-link{ background: rgba(242, 243, 241, .06); color: #BAC5D9; }
#sidebar .back-link:hover{ background: rgba(242, 243, 241, .12); color: var(--papel); }
.sidebar-obra-header{ background: var(--tinta-alta); border-bottom: 2px solid var(--laton); }
.sidebar-obra-header .clave{ color: var(--laton-claro); font-family: var(--fuente-cifra); opacity: 1; }
.sidebar-obra-header .nombre{ color: var(--papel); }
.topbar{ background: var(--papel-alto); border-bottom: 1px solid var(--linea); }
/* Tarjetas de acceso (login y cuenta) */
.login-card, .cuenta-card{ background: var(--papel-alto); box-shadow: 0 20px 60px rgba(13, 23, 41, .45); }
.login-card h4, .cuenta-card h4{ color: var(--marca); font-weight: 700; }
/* Campos en blanco sobre tarjetas de papel; texto «warning» en latón legible */
:root{ --campo: #FFFFFF; }
.form-control, .form-select{ background-color: var(--campo); }
.form-control:disabled, .form-select:disabled{ background-color: var(--papel); }
.text-warning{ color: var(--laton-texto) !important; }
/* --------------------------------------------------------------------------
7. Logotipo oficial (v2.11.42) — templates/_logo.html
SVG en línea con fill=currentColor: petróleo sobre claro, papel en la barra
lateral. El tamaño se ajusta con --logo-alto; el ™ escala con él.
-------------------------------------------------------------------------- */
.logo-teodolia{ display: inline-flex; align-items: flex-start; line-height: 1; color: var(--marca); vertical-align: middle; }
.logo-teodolia .logo{ display: block; height: var(--logo-alto, 1.25rem); width: auto; aspect-ratio: 21040 / 3058; color: inherit; }
.logo-teodolia .marca-tm{ font-size: calc(var(--logo-alto, 1.25rem) * .42); vertical-align: baseline; line-height: 1; margin-left: .2em; }
#sidebar .logo-teodolia{ --logo-alto: 1.05rem; color: var(--papel); }
#sidebar .logo-teodolia .marca-tm{ color: #8E9BB4; }
#sidebar .brand-logo{ display: block; flex-shrink: 0; padding: .95rem 1rem .75rem; border-bottom: 1px solid var(--linea-oscura); text-decoration: none; }
.login-card .logo-teodolia,
.cuenta-card .logo-teodolia{ --logo-alto: 1.9rem; }
/* --------------------------------------------------------------------------
8. Razón social y membrete de impresión (v2.11.43)
-------------------------------------------------------------------------- */
#sidebar .brand-logo small{ display: block; margin-top: .4rem; font-size: .72rem; color: #8E9BB4; letter-spacing: .02em; }
#sidebar .brand .link-cuenta{ color: var(--laton-claro); }
.membrete-print{ align-items: center; gap: 1rem; padding-bottom: .6rem; margin-bottom: .8rem; border-bottom: 2px solid var(--laton); }
.membrete-logo{ max-height: 52px; max-width: 160px; }
.membrete-rs{ font-weight: 700; font-size: 1.05rem; color: var(--tinta); }
.membrete-titulo{ font-weight: 700; color: var(--tinta); }
.membrete-dato{ font-size: .78rem; color: var(--grafito); }
.membrete-obra{ margin-bottom: 1rem; color: var(--tinta); }
/* --------------------------------------------------------------------------
9. Fotos de obra (v2.11.44)
-------------------------------------------------------------------------- */
.foto-mini{ overflow: hidden; border-radius: var(--radio); background: var(--papel); }
.foto-mini img{ width: 100%; height: 100%; object-fit: cover; }
.foto-tarjeta .card-body{ line-height: 1.35; }
/* --------------------------------------------------------------------------
10. Incidencias (v2.11.45)
-------------------------------------------------------------------------- */
.bitacora-inc > li{ border-left: 2px solid var(--linea); padding-left: .75rem; }
@media print{
#sidebar, .topbar, .no-print{ display: none !important; }
#main{ margin-left: 0 !important; }
.page-content{ padding: 0 !important; }
body{ background: #fff !important; }
}