/* =========================
PymeOps.ai — Web CSS Kit
========================= */
/* 1) Import Fonts (Google Fonts)
Alternativa A: en el
*/
/* 2) Design Tokens */
:root {
/* Brand */
--brand: #1F7A4D; /* Pyme Green */
--brand-600: #1B6E45;
--brand-500: #238A57;
--brand-100: #E6F4EC;
/* Neutrals */
--text: #1F2937; /* Graphite */
--text-muted: #6B7280;
--paper: #F6F1E8; /* Warm background */
--bg: #EEF2F5; /* App background */
--surface: #FFFFFF; /* Cards */
--border: #E5E7EB;
/* Accent / Semantic */
--accent: #D96B4A; /* Terracotta (CTA fuerte / error-like) */
--warning: #E6B34A; /* Mustard */
--info: #2D6CDF;
--success: var(--brand);
--danger: #D45045;
/* States */
--active: var(--brand);
--hover: var(--brand-600);
--focus: rgba(31, 122, 77, 0.28);
--disabled-bg: #F3F4F6;
--disabled-text: #9CA3AF;
/* Typography */
--font-title: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
/* Layout */
--radius-lg: 16px;
--radius-md: 12px;
--radius-sm: 10px;
--shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
--shadow-md: 0 10px 24px rgba(17, 24, 39, 0.10);
--container: 1120px;
/* Spacing scale */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
}
/* 3) Base */
* { box-sizing: border-box; }
html, body {
height: 100%;
}
body {
margin: 0;
background: var(--paper);
color: var(--text);
font-family: var(--font-body);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--s-4);
}
a {
color: var(--brand);
text-decoration: none;
}
a:hover { color: var(--hover); text-decoration: underline; }
h1, h2, h3 {
font-family: var(--font-title);
margin: 0 0 var(--s-3);
letter-spacing: -0.02em;
}
h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.05; }
h2 { font-size: 28px; line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.25; }
p { margin: 0 0 var(--s-4); color: var(--text); }
.small { font-size: 14px; color: var(--text-muted); }
/* 4) Surfaces / Cards */
.surface {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--s-5);
}
/* 5) Navigation (activo/pasivo) */
.nav {
display: flex;
align-items: center;
gap: var(--s-4);
}
.nav a {
color: var(--text-muted); /* pasivo */
font-weight: 500;
padding: 8px 10px;
border-radius: 10px;
}
.nav a:hover { color: var(--text); background: rgba(31,122,77,0.08); text-decoration: none; }
.nav a.is-active {
color: var(--text); /* activo */
background: rgba(31,122,77,0.14);
}
/* 6) Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 46px;
padding: 0 18px;
border-radius: 14px;
border: 1px solid transparent;
font-weight: 600;
font-family: var(--font-title);
cursor: pointer;
transition: 120ms ease;
user-select: none;
}
.btn:focus {
outline: none;
box-shadow: 0 0 0 4px var(--focus);
}
/* Primary (verde) */
.btn-primary {
background: var(--brand);
color: #fff;
}
.btn-primary:hover { background: var(--hover); }
/* Secondary (blanco con borde verde) */
.btn-secondary {
background: #fff;
color: var(--brand);
border-color: rgba(31,122,77,0.35);
}
.btn-secondary:hover { background: rgba(31,122,77,0.06); }
/* Accent (terracotta) */
.btn-accent {
background: var(--accent);
color: #fff;
}
.btn-accent:hover { filter: brightness(0.96); }
/* Disabled */
.btn:disabled,
.btn.is-disabled {
background: var(--disabled-bg);
color: var(--disabled-text);
border-color: var(--border);
cursor: not-allowed;
box-shadow: none;
}
/* 7) Inputs / Forms */
.input, select, textarea {
width: 100%;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 14px;
font-family: var(--font-body);
font-size: 16px;
color: var(--text);
transition: 120ms ease;
}
.input:focus, select:focus, textarea:focus {
outline: none;
border-color: rgba(31,122,77,0.55);
box-shadow: 0 0 0 4px var(--focus);
}
.input::placeholder { color: #9CA3AF; }
/* 8) Chips / Status badges (para pedidos) */
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 999px;
font-weight: 600;
font-size: 13px;
border: 1px solid transparent;
}
.badge-confirmado {
background: var(--brand-100);
color: var(--brand-600);
border-color: rgba(31,122,77,0.25);
}
.badge-preparacion {
background: rgba(230,179,74,0.18);
color: #8A5B00;
border-color: rgba(230,179,74,0.35);
}
.badge-camino {
background: rgba(31,122,77,0.12);
color: var(--brand);
border-color: rgba(31,122,77,0.25);
}
.badge-problema {
background: rgba(212,80,69,0.14);
color: var(--danger);
border-color: rgba(212,80,69,0.28);
}
/* 9) Helper: sections */
.section {
padding: clamp(28px, 4vw, 56px) 0;
}
/* 10) Optional: App background (si hacés dashboard) */
.app-shell {
background: var(--bg);
min-height: 100vh;
}