@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Quicksand:wght@500;600;700&display=swap');
/* =============================================================================
IDENTIDAD VISUAL FULLCOLLEGE · tokens v1 · septiembre 2026
-----------------------------------------------------------------------------
Fuente de verdad de la linea grafica de fullcollege.cl. Los valores salen del
CSS del sitio oficial y del rediseno del login de Remuneraciones, desplegado
el 21-09-2026.
COMO SE USA
Se incluye el archivo y ya quedan disponibles las variables. Lo demas es
opcional: las clases con prefijo `fc-` son las piezas con firma, listas para
usar, y estan prefijadas justamente para no chocar con Bootstrap, Tailwind ni
el CSS que ya tenga el proyecto.
Las fuentes se cargan solas con el @import de arriba. Si el proyecto prefiere
controlar la carga (es mas rapido), se borra esa linea y se pone en el HTML:
QUE HACE Y QUE NO
Este archivo define los valores y entrega las piezas. NO re-tematiza solo un
framework: si el proyecto usa Bootstrap o Tailwind, los componentes de ese
framework siguen con sus colores hasta que se mapeen los valores en su propia
configuracion. Ver las notas del final.
REGLAS
1. El azul es la accion principal, una sola por pantalla. El verde es la
accion secundaria y las confirmaciones. El verde nunca es la principal.
2. Quicksand en titulos, botones y etiquetas. Inter en todo lo que se lee de
corrido y en cualquier cifra.
3. No se inventan colores. Si falta un tono, se decide una vez y se agrega
aca, no dentro de un componente.
4. La marca del producto no es la del cliente: el login y el marco de la
aplicacion son FullCollege; el sidebar y los documentos que recibe el
funcionario llevan el logo del colegio.
FUERA DE ALCANCE EN LA v1
Colores de graficos (Chart.js recibe los colores por JavaScript: se leen
estas variables con getComputedStyle, en una fase aparte) y modo oscuro.
============================================================================= */
:root {
/* ---- Azules: color principal de la marca ---- */
--fc-azul: #055a8d; /* acciones primarias, fondo de marca, enlaces */
--fc-azul-osc: #043e62; /* hover del boton principal, cierre del degradado */
--fc-azul-acento: #0a7bbf; /* foco de campos y blob claro; no para texto sobre blanco */
--fc-azul-tenue: #eaf3f9; /* fondos suaves, seleccionados, avisos informativos */
/* ---- Verdes: accion secundaria y confirmaciones ---- */
--fc-verde: #28b463;
--fc-verde-osc: #1f8f4e; /* texto verde sobre fondo claro (el base no da contraste) */
--fc-verde-tenue: #e8f8ee; /* relleno del boton secundario, mensajes de exito */
/* ---- Neutros. Tienen sesgo azul a proposito: un gris puro al lado del
azul de marca se ve sucio. ---- */
--fc-texto: #0f172a; /* texto principal (negro azulado, no negro puro) */
--fc-texto-2: #334155; /* texto secundario y parrafos largos */
--fc-texto-3: #64748b; /* apoyo, etiquetas, ayudas bajo los campos */
--fc-borde: #e2e8f0; /* bordes de campos, tarjetas y separadores */
--fc-fondo: #f1f5f9; /* fondo de pagina cuando no va el degradado */
/* ---- Tipografia ---- */
--fc-display: 'Quicksand', 'Trebuchet MS', sans-serif;
--fc-body: 'Inter', system-ui, -apple-system, sans-serif;
/* ---- Formas ---- */
--fc-radio: 12px; /* campos y tarjetas */
--fc-radio-pill: 9999px; /* botones */
--fc-alto-control: 50px; /* alto de botones y campos */
/* ---- Proporciones del login partido ---- */
--fc-panel: 56%; /* ancho del panel de marca */
--fc-card: 420px; /* ancho de la tarjeta de acceso */
}
/* =============================================================================
PIEZAS CON FIRMA (opcionales)
Todas con prefijo `fc-` para no colisionar con el CSS existente.
============================================================================= */
/* ---- Fondo de marca ---------------------------------------------------------
Degradado azul en diagonal con dos manchas radiales: verde arriba a la
derecha, azul claro abajo a la izquierda. Son capas del mismo background, asi
que no se agregan elementos al DOM ni se toca el layout. Va en el fondo de la
aplicacion y en el panel del login. */
.fc-fondo-marca {
background-color: #055a8d;
background-image:
radial-gradient(circle at 92% 8%, rgba(40, 180, 99, 0.45) 0, rgba(40, 180, 99, 0) 32%),
radial-gradient(circle at 6% 94%, rgba(10, 123, 191, 0.70) 0, rgba(10, 123, 191, 0) 30%),
linear-gradient(145deg, #055a8d 0%, #043e62 100%);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
color: #fff;
}
/* ---- Botones ---------------------------------------------------------------
Pildora de 50px en Quicksand 700. Azul = accion principal. */
.fc-boton {
height: var(--fc-alto-control);
padding: 0 30px;
border: 0;
border-radius: var(--fc-radio-pill);
background: var(--fc-azul);
color: #fff;
font: 700 15px var(--fc-display);
letter-spacing: .2px;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.fc-boton:hover { background: var(--fc-azul-osc); }
.fc-boton:active { transform: translateY(1px); }
.fc-boton:focus-visible { outline: 3px solid var(--fc-azul-acento); outline-offset: 2px; }
/* Accion secundaria: verde contorneado que se rellena al pasar por encima. */
.fc-boton--secundario {
background: var(--fc-verde-tenue);
border: 1.5px solid var(--fc-verde);
color: var(--fc-verde-osc);
}
.fc-boton--secundario:hover { background: var(--fc-verde); color: #fff; }
/* Accion terciaria: se ve como enlace, no como boton. */
.fc-enlace {
height: auto;
padding: 6px 0;
background: none;
border: 0;
color: var(--fc-azul);
font: 600 14px var(--fc-display);
cursor: pointer;
}
.fc-enlace:hover { color: var(--fc-azul-acento); text-decoration: underline; }
/* ---- Campos ----------------------------------------------------------------
Altos, de esquinas suaves, y con anillo azul al enfocarse. */
.fc-campo {
height: var(--fc-alto-control);
width: 100%;
padding: 0 16px;
border: 1.5px solid var(--fc-borde);
border-radius: var(--fc-radio);
background: #f8fafc;
color: var(--fc-texto);
font: 400 15px var(--fc-body);
transition: border-color .15s, box-shadow .15s, background .15s;
}
.fc-campo::placeholder { color: #94a3b8; }
.fc-campo:focus {
border-color: var(--fc-azul-acento);
background: #fff;
box-shadow: 0 0 0 4px rgba(10, 123, 191, .14);
outline: none;
}
/* ---- Login partido ----------------------------------------------------------
Panel de marca a la izquierda, tarjeta de acceso a la derecha. Bajo los
1000px el panel se oculta y la tarjeta queda centrada. */
.fc-login {
display: grid;
grid-template-columns: var(--fc-panel) 1fr;
min-height: 100vh;
}
.fc-login__panel {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 7vw;
overflow: hidden;
}
.fc-login__acceso {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--fc-fondo);
}
.fc-login__tarjeta { width: 100%; max-width: var(--fc-card); }
@media (max-width: 1000px) {
.fc-login { grid-template-columns: 1fr; }
.fc-login__panel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.fc-boton, .fc-campo { transition: none; }
}
/* =============================================================================
SI EL PROYECTO USA UN FRAMEWORK
-----------------------------------------------------------------------------
Este archivo sigue siendo la fuente de los valores, pero hay que mapearlos en
la configuracion del framework para que sus componentes tambien cambien.
BOOTSTRAP 5 CON SASS
En el archivo de variables propio del proyecto, ANTES de importar Bootstrap:
$primary: #055a8d;
$success: #28b463;
$font-family-sans-serif: 'Inter', system-ui, sans-serif;
$headings-font-family: 'Quicksand', sans-serif;
$btn-border-radius: 9999px;
$btn-border-radius-sm: 9999px;
$btn-border-radius-lg: 9999px;
Si el tema usa degradados (el caso de argon), hay pares por cada color
semantico y hay que cambiarlos tambien, o las superficies con
.bg-gradient-primary conservan el color del tema original:
$primary-gradient: #055a8d;
$primary-gradient-state: #043e62;
$success-gradient: #28b463;
$success-gradient-state: #1f8f4e;
Y si el tema es comprado, se tocan solo sus archivos de extension, nunca el
codigo del tema, para que siga siendo actualizable.
TAILWIND
En el preset o en tailwind.config:
colors: { fc: { azul: '#055a8d', azulOsc: '#043e62', azulAcento: '#0a7bbf',
azulTenue: '#eaf3f9', verde: '#28b463', verdeOsc: '#1f8f4e',
verdeTenue: '#e8f8ee' } },
fontFamily: { display: ['Quicksand','sans-serif'],
sans: ['Inter','system-ui','sans-serif'] },
borderRadius: { campo: '12px' }
============================================================================= */