/* ========================================================= Rasta Pets – base.css (Pastel Naranja + Rosa) Estilo Soft UI / Modern Dashboard con dark mode opcional. ========================================================= */ /* ------------------ Variables de tema -------------------- */ :root { /* Paleta pastel */ --color-primary: #FFB37B; /* Naranja pastel */ --color-primary-hover: #F39E61; /* Hover naranja */ --color-secondary: #F7A8C9; /* Rosa pastel */ --color-secondary-hover: #F28FBA; /* Hover rosa */ --color-bg: #F7F9FC; /* Fondo general suave */ --color-surface: #FFFFFF; /* Tarjetas/paneles */ --color-text: #334155; /* Texto principal */ --color-muted: #64748B; /* Texto secundario */ --color-border: #E5E7EB; /* Borde neutro */ --color-danger: #FF9BA3; /* Error/alerta suave */ --color-success: #9EE6D5; /* Éxito menta pastel */ --color-info: #A9C9FF; /* Info azul suave */ --color-warning: #FFE08A; /* Aviso */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; /* Sombras “Soft UI” */ --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06); --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.10); --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* Realce/focus */ --focus-primary: rgba(255, 179, 123, 0.35); /* naranja */ --focus-secondary: rgba(247, 168, 201, 0.35); /* rosa */ } /* ------------------ Dark mode opcional ------------------- */ /* Actívalo con: */ :root[data-theme="dark"] { --color-bg: #0F172A; --color-surface: #111827; --color-text: #E5E7EB; --color-muted: #94A3B8; --color-border: #1F2937; --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 12px 32px rgba(0,0,0,0.45); /* Ajustes de pastel en dark */ --color-primary: #FFC59A; --color-primary-hover: #FFB37B; --color-secondary: #FFB3D0; --color-secondary-hover: #F7A8C9; --focus-primary: rgba(255, 197, 154, 0.25); --focus-secondary: rgba(255, 179, 208, 0.25); } /* ------------------ Tipografía global -------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); * { box-sizing: border-box; } body { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 16px; line-height: 1.55; color: var(--color-text); background: var(--color-bg); margin: 0; -webkit-font-smoothing: antialiased; } /* ------------------ Enlaces ------------------------------- */ a { color: var(--color-secondary); text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); } a:hover { color: var(--color-secondary-hover); } a:focus-visible { outline: 3px solid var(--focus-secondary); outline-offset: 2px; } /* ------------------ Botones ------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border: 1px solid transparent; cursor: pointer; border-radius: var(--radius-md); padding: 10px 16px; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); background: var(--color-surface); color: var(--color-text); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary { background: var(--color-primary); color: #1F2937; border-color: rgba(0,0,0,0.02); } .btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); } .btn-primary:active { transform: translateY(1px); } .btn-accent { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #1F2937; } .btn-accent:hover { filter: brightness(1.03); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-outline:hover { background: rgba(0,0,0,0.02); } /* ------------------ Formularios --------------------------- */ input, select, textarea { font: inherit; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } input::placeholder, textarea::placeholder { color: var(--color-muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--focus-primary); } label { display: inline-block; font-weight: 600; font-size: 0.95rem; color: var(--color-muted); margin-bottom: 6px; } /* ------------------ Chips / Badges ------------------------ */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 0.85rem; font-weight: 600; border-radius: 999px; background: #FFF7ED; /* base naranja claro */ color: #9A3412; border: 1px solid #FED7AA; } .badge.pink { background: #FFF1F5; /* base rosa claro */ color: #9D174D; border-color: #FBCFE8; } /* ------------------ Tarjetas y paneles -------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1rem; } .card h2, .card h3 { font-size: 1.05rem; margin: 0 0 8px; } /* Variantes para KPIs (números grandes del dashboard) */ .kpi { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-lg); background: linear-gradient(180deg, #FFFFFF, #FFF7F3); border: 1px solid var(--color-border); } .kpi .label { color: var(--color-muted); font-weight: 600; } .kpi .value { font-size: 1.8rem; font-weight: 700; } /* ------------------ Tablas ------------------------------- */ table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--color-surface); } th, td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); text-align: left; } th { color: var(--color-muted); font-weight: 700; letter-spacing: .01em; } tr:hover td { background-color: rgba(250, 176, 143, 0.08); } /* hover pastel naranja */ /* ------------------ Utilidades ---------------------------- */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--color-muted); } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .p-1 { padding: 4px; } .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } /* Tarjetas con borde sutil */ .rounded { border-radius: var(--radius-md); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } /* ------------------ Sidebar (toque suave) ---------------- */ .sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .sidebar .item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--color-text); } .sidebar .item:hover { background: rgba(247, 168, 201, 0.12); } .sidebar .item.is-active { background: linear-gradient(135deg, rgba(255,179,123,.28), rgba(247,168,201,.28)); font-weight: 700; } /* ------------------ Alertas / estados -------------------- */ .alert { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: #FFF7F9; /* base rosada */ } .alert.success { background: #F0FFFA; border-color: #CFF6EC; color: #0F766E; } .alert.info { background: #F5F8FF; border-color: #DDE7FF; color: #1E3A8A; } .alert.warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; } .alert.danger { background: #FFF5F6; border-color: #FFC3C8; color: #991B1B; } /* ------------------ Scrollbar (moderno) ------------------- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.35); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.60); } :root { --chart-1: #FFB37B; --chart-2: #F7A8C9; --chart-3: #A9C9FF; --chart-4: #9EE6D5; }