/* =====================================================================
marca/base.css - KIT BASE GJVcorp (CAPA 1)
=====================================================================
Norma: 00 ESTANDAR GJVcorp.md v1.2, secciones 7.1 y 7.2
UTF-8 sin BOM, fin de linea LF (seccion 2.4)
QUE ES
Los tokens neutros comunes a todo GJVcorp: color sin acento,
tipografia, espaciado, radios, sombras y semantica de estado.
QUE NO ES
NO lleva tokens de acento. El acento vive en la capa 2, en
marca/productos/[producto].css. Un base.css con acento obliga a
cada proyecto a redefinir los tokens neutros para cambiar su color,
y eso es lo que produjo los 4 base.css distintos que este proyecto
viene a unificar.
COMO SE USA
capa 1
capa 2, despues
===================================================================== */
:root {
--gjv-velo: rgba(15,23,42,.65);
/* -----------------------------------------------------------------
COLOR - texto (3 tokens)
----------------------------------------------------------------- */
--gjv-navy: #0F172A; /* texto principal, barras de marca */
--gjv-texto-2: #475569; /* texto secundario */
--gjv-texto-3: #94A3B8; /* deshabilitado */
/* -----------------------------------------------------------------
COLOR - superficies y bordes (5 tokens)
----------------------------------------------------------------- */
--gjv-borde: #E2E8F0; /* bordes */
--gjv-borde-fuerte: #CBD5E1; /* bordes de campos y controles */
--gjv-fondo: #F8FAFC; /* fondo de aplicacion */
--gjv-superficie: #FFFFFF; /* tarjetas y paneles */
--gjv-banda: #F1F5F9; /* cabeceras de tabla */
/* -----------------------------------------------------------------
COLOR - semantica de estado (4 tokens)
Semantica fija (seccion 7.3): verde correcto, ambar advertencia,
rojo error, azul informacion. Ningun producto la cambia.
----------------------------------------------------------------- */
--gjv-exito: #16A34A; /* correcto */
--gjv-alerta: #F59E0B; /* advertencia */
--gjv-peligro: #DC2626; /* error */
--gjv-info: #2563EB; /* informacion */
/* -----------------------------------------------------------------
TIPOGRAFIA - familias (2 tokens)
----------------------------------------------------------------- */
--gjv-fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--gjv-fuente-mono: Consolas, "Courier New", monospace;
/* -----------------------------------------------------------------
TIPOGRAFIA - escala (7 tokens)
----------------------------------------------------------------- */
--gjv-t-11: 11px; /* rotulos en mayusculas con espaciado */
--gjv-t-12: 12px; /* notas y tablas densas */
--gjv-t-14: 14px; /* cuerpo */
--gjv-t-16: 16px; /* subtitulo */
--gjv-t-20: 20px; /* titulo de seccion */
--gjv-t-28: 28px; /* titulo de pagina */
--gjv-t-36: 36px; /* portada */
/* -----------------------------------------------------------------
ESPACIADO - escala (8 tokens)
----------------------------------------------------------------- */
--gjv-e-1: 4px;
--gjv-e-2: 8px;
--gjv-e-3: 12px;
--gjv-e-4: 16px;
--gjv-e-5: 24px;
--gjv-e-6: 32px;
--gjv-e-7: 48px;
--gjv-e-8: 64px;
/* -----------------------------------------------------------------
FORMA - radios (3 tokens)
----------------------------------------------------------------- */
--gjv-r-sm: 8px;
--gjv-r-md: 12px;
--gjv-r-lg: 16px;
/* -----------------------------------------------------------------
PROFUNDIDAD - sombras (2 tokens)
----------------------------------------------------------------- */
--gjv-sombra-sm: 0 1px 2px rgba(15,23,42,.05);
--gjv-sombra-md: 0 8px 24px rgba(15,23,42,.08);
/* -----------------------------------------------------------------
CONTROLES (2 tokens)
----------------------------------------------------------------- */
--gjv-alto-control: 32px;
--gjv-foco: 0 0 0 3px rgba(37,99,235,.35);
}
/* =====================================================================
TOTAL: 49 tokens neutros.
CERO tokens de acento: --gjv-acento, --gjv-acento-oscuro,
--gjv-acento-tenue, --gjv-texto-sobre-acento y --primario viven
en la capa 2 (marca/productos/[producto].css).
===================================================================== */
/* =====================================================================
COMPONENTES BASE
Estilos neutros que todo producto hereda. El acento lo pone la capa 2
a traves de --gjv-acento, que aqui solo se consume, nunca se define.
===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--gjv-fuente);
font-size: var(--gjv-t-14);
line-height: 1.5;
color: var(--gjv-navy);
background: var(--gjv-fondo);
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--gjv-t-28); }
h2 { font-size: var(--gjv-t-20); }
h3 { font-size: var(--gjv-t-16); }
p { margin: 0 0 var(--gjv-e-3); }
code, pre, kbd {
font-family: var(--gjv-fuente-mono);
font-size: var(--gjv-t-12);
}
a {
color: var(--gjv-acento, var(--gjv-info));
text-decoration: none;
}
a:hover { text-decoration: underline; }
/* --- Tarjeta y panel --- */
.gjv-tarjeta {
background: var(--gjv-superficie);
border: 1px solid var(--gjv-borde);
border-radius: var(--gjv-r-md);
box-shadow: var(--gjv-sombra-sm);
padding: var(--gjv-e-4);
}
/* --- Boton --- */
.gjv-boton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--gjv-alto-control);
padding: 0 var(--gjv-e-4);
font-family: inherit;
font-size: var(--gjv-t-14);
border: 1px solid var(--gjv-borde-fuerte);
border-radius: var(--gjv-r-sm);
background: var(--gjv-superficie);
color: var(--gjv-navy);
cursor: pointer;
}
.gjv-boton:hover { background: var(--gjv-banda); }
.gjv-boton:disabled { color: var(--gjv-texto-3); cursor: not-allowed; }
/* Un solo boton primario por pantalla (seccion 7.3) */
.gjv-boton-primario {
background: var(--gjv-acento, var(--gjv-info));
border-color: var(--gjv-acento, var(--gjv-info));
color: var(--gjv-texto-sobre-acento, #FFFFFF);
}
.gjv-boton-primario:hover {
background: var(--gjv-acento-oscuro, var(--gjv-info));
border-color: var(--gjv-acento-oscuro, var(--gjv-info));
}
/* --- Foco visible en todo lo interactivo (seccion 7.5) --- */
:focus-visible {
outline: none;
box-shadow: var(--gjv-foco);
}
/* --- Campo de formulario --- */
.gjv-campo {
width: 100%;
min-height: var(--gjv-alto-control);
padding: 0 var(--gjv-e-2);
font-family: inherit;
font-size: var(--gjv-t-14);
color: var(--gjv-navy);
background: var(--gjv-superficie);
border: 1px solid var(--gjv-borde-fuerte);
border-radius: var(--gjv-r-sm);
}
.gjv-campo::placeholder { color: var(--gjv-texto-3); }
.gjv-campo:disabled { background: var(--gjv-banda); color: var(--gjv-texto-3); }
.gjv-etiqueta {
display: block;
font-size: var(--gjv-t-12);
color: var(--gjv-texto-2);
margin-bottom: var(--gjv-e-1);
}
/* --- Tabla con contenedor de desplazamiento (seccion 7.8.1) --- */
.gjv-tabla-scroll { overflow-x: auto; }
.gjv-tabla {
width: 100%;
border-collapse: collapse;
font-size: var(--gjv-t-12);
}
.gjv-tabla th {
background: var(--gjv-banda);
color: var(--gjv-texto-2);
text-align: left;
font-weight: 600;
padding: var(--gjv-e-2);
border-bottom: 1px solid var(--gjv-borde);
}
.gjv-tabla td {
padding: var(--gjv-e-2);
border-bottom: 1px solid var(--gjv-borde);
}
.gjv-tabla tbody tr:hover { background: var(--gjv-banda); }
/* --- Estado vacio: toda tabla y lista lo necesita (seccion 7.5) --- */
.gjv-vacio {
padding: var(--gjv-e-6);
text-align: center;
color: var(--gjv-texto-2);
font-size: var(--gjv-t-14);
}
/* --- Mensajes semanticos --- */
.gjv-aviso {
padding: var(--gjv-e-3);
border-radius: var(--gjv-r-sm);
border-left: 3px solid var(--gjv-info);
background: var(--gjv-superficie);
font-size: var(--gjv-t-14);
}
.gjv-aviso-exito { border-left-color: var(--gjv-exito); }
.gjv-aviso-alerta { border-left-color: var(--gjv-alerta); }
.gjv-aviso-peligro { border-left-color: var(--gjv-peligro); }
/* --- Cargando: toda accion de mas de 300 ms (seccion 7.5) --- */
.gjv-cargando { cursor: progress; }
/* --- Rotulos --- */
.gjv-rotulo {
font-size: var(--gjv-t-11);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--gjv-texto-2);
}
/* Accesibilidad: solo para lectores de pantalla */
.gjv-solo-lectores {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* =====================================================================
FIN DEL KIT BASE
===================================================================== */