/* ============================================================
Design System Geoservice — Sistema de Compras
Tokens del Prompt Design v1.0. NUNCA hardcodear colores en
componentes: usar siempre estas variables CSS.
Temas: [data-tema="verde|claro|azul|slate|dark"] en .
============================================================ */
:root,
body[data-tema="verde"] {
/* Paleta principal */
--g9: #0D3D26; /* principal oscuro: sidebar, cabeceras, btn primario */
--g7: #155C39; /* principal medio: headings H2 */
--g5: #4AAD6B; /* acento: botones accent, badges activos */
--g2: #EBF8F1; /* verde claro: fondos de cards, badges */
--g3: #B3E4C4; /* verde borde */
/* Superficies */
--bg: #F5F7F5; /* fondo general de la app */
--card: #FFFFFF; /* cards, modals */
--sidebar-bg: var(--g9);
--sidebar-item-activo: rgba(74, 173, 107, .2);
--sidebar-texto: #E2E8F0;
/* Texto */
--texto: #0F1A14;
--texto-2: #5C7068;
--texto-3: #8FA99A;
--texto-inverso: #FFFFFF;
/* Bordes */
--borde: #DDE8E2;
--borde-claro: #EEF4F1;
/* Semánticos */
--warn: #D97706;
--warn-bg: #FEF3C7;
--warn-borde: #F59E0B;
--error: #DC2626;
--error-bg: #FEE2E2;
--error-borde: #FCA5A5;
--info: #1D4ED8;
--info-bg: #EFF6FF;
--contab: #5B21B6;
--contab-bg: #EDE9FE;
--ok: #1D7A4A;
--ok-bg: #EBF8F1;
/* Tokens de forma */
--radio: 10px;
--radio-card: 14px;
--radio-btn: 6px;
--radio-badge: 20px;
--sombra-card: 0 1px 3px rgba(13, 61, 38, .08), 0 4px 12px rgba(13, 61, 38, .06);
/* Tipografía */
--fuente-ui: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
--fuente-mono: "JetBrains Mono", Consolas, monospace;
}
body[data-tema="claro"] {
--sidebar-bg: #F1F5F9;
--sidebar-texto: #0F172A;
--sidebar-item-activo: rgba(14, 165, 233, .15);
--g5: #0EA5E9;
--g9: #0C4A6E;
--g2: #E0F2FE;
--g3: #BAE6FD;
}
body[data-tema="azul"] {
--sidebar-bg: #1E3A8A;
--sidebar-texto: #E2E8F0;
--sidebar-item-activo: rgba(59, 130, 246, .25);
--g5: #3B82F6;
--g9: #1E3A8A;
--g2: #EFF6FF;
--g3: #BFDBFE;
}
body[data-tema="slate"] {
--sidebar-bg: #1E293B;
--sidebar-texto: #E2E8F0;
--sidebar-item-activo: rgba(129, 140, 248, .25);
--g5: #818CF8;
--g9: #1E293B;
--g2: #EEF2FF;
--g3: #C7D2FE;
}
body[data-tema="dark"] {
--sidebar-bg: #060D16;
--sidebar-texto: #E2E8F0;
--sidebar-item-activo: rgba(74, 173, 107, .25);
--bg: #111827;
--card: #1F2937;
--texto: #E2E8F0;
--texto-2: #94A3B8;
--texto-3: #64748B;
--borde: #374151;
--borde-claro: #273244;
--g2: #0d2b1c;
--g3: #14532D;
}
/* ============ Base ============ */
body {
margin: 0;
background: var(--bg);
color: var(--texto);
font-family: var(--fuente-ui);
font-size: 14px;
transition: background .2s ease, color .2s ease;
}
h1, h2, h3 { color: var(--g7); }
code, .mono { font-family: var(--fuente-mono); }
/* ============ Botones ============ */
.btn {
border-radius: var(--radio-btn);
padding: 8px 16px;
font-family: var(--fuente-ui);
font-weight: 600;
font-size: 13px;
border: 1px solid transparent;
cursor: pointer;
transition: all .2s ease;
}
.btn-primary { background: var(--g9); color: var(--texto-inverso); }
.btn-accent { background: var(--g5); color: var(--g9); }
.btn-ghost { background: transparent; border-color: var(--borde); color: var(--texto); }
.btn-danger { background: var(--error-bg); color: var(--error); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* ============ Cards ============ */
.card-geo {
background: var(--card);
border-radius: var(--radio-card);
box-shadow: var(--sombra-card);
border: 1px solid var(--borde-claro);
padding: 18px;
}
/* ============ Badges ============ */
.badge-geo {
display: inline-block;
border-radius: var(--radio-badge);
padding: 3px 12px;
font-size: 11px;
font-weight: 700;
}
.badge-verde { background: var(--g2); color: var(--ok); border: 1px solid var(--g3); }
.badge-amber { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-borde); }
.badge-rojo { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-borde); }
.badge-azul { background: var(--info-bg); color: var(--info); }
.badge-morado { background: var(--contab-bg); color: var(--contab); }
.badge-gris { background: var(--borde-claro); color: var(--texto-2); }
/* ============ CRUD administrativo (Usuarios/Roles/Grupos y similares) ============ */
/* Clases compartidas entre módulos — evitan duplicar reglas en cada .razor.css
aislado (CSS isolation no comparte selectores entre componentes). */
.barra-acciones {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.tabla-vacia {
text-align: center;
color: var(--texto-3);
padding: 22px !important;
}
.btn-icono {
background: transparent;
border: none;
cursor: pointer;
font-size: 13px;
padding: 4px 6px;
border-radius: 6px;
color: var(--texto-2);
}
.btn-icono:hover {
background: var(--borde-claro);
color: var(--texto);
}
.form-titulo {
font-size: 14px;
font-weight: 700;
color: var(--g7);
margin-bottom: 14px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.form-grid label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11.5px;
font-weight: 700;
color: var(--texto-2);
text-transform: uppercase;
letter-spacing: .03em;
}
.chk {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 500;
text-transform: none;
color: var(--texto);
cursor: pointer;
}
.form-pie {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 4px;
}
@media (max-width: 900px) {
.form-grid {
grid-template-columns: 1fr;
}
}
/* ============ Pestañas (tabs) ============ */
.tabs-geo {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--borde);
margin: 14px 0 18px 0;
}
.tabs-scroll {
overflow-x: auto;
flex-wrap: nowrap;
}
.tab-geo {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 10px 4px;
margin-right: 18px;
font-size: 13.5px;
font-weight: 600;
color: var(--texto-2);
cursor: pointer;
white-space: nowrap;
}
.tab-geo:hover { color: var(--texto); }
.tab-geo.activo {
color: var(--g9);
border-bottom-color: var(--g5);
}
.tab-contenido {
max-width: 100%;
}
/* ============ Tablas ============ */
.tabla-geo {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.tabla-geo th,
.tabla-geo td {
text-align: left;
padding: 9px 10px;
border-bottom: 1px solid var(--borde-claro);
}
.tabla-geo thead { background: var(--bg); }
.tabla-geo th {
font-size: 10.5px;
text-transform: uppercase;
font-weight: 700;
color: var(--texto-2);
letter-spacing: .04em;
}
.tabla-geo tbody tr:hover { background: rgba(74, 173, 107, .02); }
/* ============ Inputs ============ */
/* Base compartida por todos los /