/* ==========================================================================
Estilos globales: tokens de diseño y elementos base compartidos por
todas las páginas de la aplicación. Cargar antes que el CSS de cada
módulo para que este último pueda sobreescribir lo que necesite.
========================================================================== */
:root {
--app-accent: #f2963e;
--app-accent-dark: #d97f28;
--app-navy: #2b2b2b;
--app-ink: #4a4a4a;
--app-muted: #8a8a8a;
--app-border: #e3e1de;
--app-bg: #f6f5f3;
--app-card: #ffffff;
--app-danger: #c0392b;
--app-danger-bg: #fdecea;
--app-radius: 6px;
--app-shadow: 0 1px 2px rgba(43, 43, 43, 0.06), 0 12px 28px -12px rgba(43, 43, 43, 0.18);
--app-font: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: var(--app-font);
color: var(--app-ink);
background: var(--app-bg);
}
a {
color: var(--app-accent-dark);
}
/* Franja superior naranja, color de marca de osTicket.
Usar como al inicio del . */
.app-brandbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--app-accent) 0%, var(--app-accent-dark) 100%);
z-index: 10;
}
/* Tarjeta blanca reutilizable en páginas centradas (login, errores, etc.). */
.app-card {
width: 100%;
max-width: 372px;
background: var(--app-card);
border: 1px solid var(--app-border);
border-radius: var(--app-radius);
box-shadow: var(--app-shadow);
padding: 32px 32px 28px;
animation: app-rise 0.35s ease-out;
}
@keyframes app-rise {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Botón primario reutilizable (enlaces y