/* =============================== FARMY PRO UI — ESTILO SILKET =============================== */ /* TOKENS BASE */ :root { --fp-font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fp-font-body: 14px; --fp-font-label: 13px; --fp-primary: #22c55e; --fp-primary-dark: #16a34a; --fp-accent: #6366f1; --fp-accent-soft: #4f46e5; --fp-bg: #f3f4f6; --fp-bg-soft: #e5e7eb; --fp-card: #ffffff; --fp-card-soft: #f9fafb; --fp-text: #0f172a; --fp-text-muted: #6b7280; --fp-border: #e5e7eb; --fp-radius-lg: 24px; --fp-radius-md: 12px; --fp-radius-pill: 999px; --fp-shadow-card: 0 18px 45px rgba(15,23,42,.18); --fp-shadow-hero: 0 28px 70px rgba(15,23,42,.6); } /* DARK MODE: agrega .fp-dark al */ .fp-dark { --fp-bg: #020617; --fp-bg-soft: #020617; --fp-card: #020617; --fp-card-soft: #030712; --fp-text: #f9fafb; --fp-text-muted: #9ca3af; --fp-border: #1f2937; --fp-shadow-card: 0 18px 45px rgba(0,0,0,.8); --fp-shadow-hero: 0 32px 80px rgba(0,0,0,.95); } /* BASE BODY */ .fp-body { margin: 0; min-height: 100vh; font-family: var(--fp-font-family); font-size: var(--fp-font-body); line-height: 1.5; background: var(--fp-bg); color: var(--fp-text); } /* ------------------------------- COMPONENTES GENERALES ------------------------------- */ .fp-logo-pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: var(--fp-radius-pill); background: rgba(15,23,42,.03); } .fp-logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 14px; background: linear-gradient(135deg,#22c55e,#16a34a); color: #f9fafb; font-weight: 700; font-size: 16px; box-shadow: 0 18px 40px rgba(15,23,42,.4); } .fp-logo-text { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; } .fp-logo-dot { color: var(--fp-primary); } /* Botón de modo oscuro */ .fp-mode-toggle { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--fp-radius-pill); border: 1px solid var(--fp-border); background: rgba(255,255,255,.9); padding: 4px 12px; font-size: 11px; cursor: pointer; color: var(--fp-text-muted); } .fp-mode-icon { font-size: 13px; } .fp-mode-label { letter-spacing: .12em; text-transform: uppercase; } /* Input pill PRO (igual Silket) */ .fp-input-pill { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: var(--fp-radius-pill); background: #fff; border: 1px solid var(--fp-border); font-size: 14px; } .fp-input-pill input, .fp-input-pill select { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; font-weight: 500; color: var(--fp-text); } .fp-input-pill input::placeholder { color: #9ca3af; } .fp-input-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #9ca3af; } /* Labels */ .fp-label { display: block; margin-bottom: 4px; font-size: var(--fp-font-label); font-weight: 500; color: var(--fp-text-muted); } /* Checkbox */ .fp-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fp-text-muted); } .fp-checkbox input { accent-color: var(--fp-primary); } /* Botones */ .fp-btn-primary { border: none; border-radius: var(--fp-radius-pill); padding: 10px 24px; font-size: 14px; font-weight: 600; cursor: pointer; background: #020617; color: #f9fafb; /* ANTES: 0 18px 45px rgba(15,23,42,.6); */ box-shadow: 0 8px 20px rgba(15,23,42,.35); } .fp-btn-primary:hover { background: #000; } .fp-btn-accent { border: none; border-radius: var(--fp-radius-pill); padding: 10px 26px; font-size: 14px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg,var(--fp-accent),var(--fp-accent-soft)); color: #f9fafb; /* ANTES: 0 18px 45px rgba(79,70,229,.6); */ box-shadow: 0 10px 26px rgba(79,70,229,.45); ; } .fp-btn-accent:hover { filter: brightness(1.05); } /* Cards */ .fp-card { border-radius: var(--fp-radius-md); background: var(--fp-card); border: 1px solid var(--fp-border); box-shadow: var(--fp-shadow-card); } /* Divider sutil */ .fp-divider { width: 100%; height: 1px; background: var(--fp-border); } /* Links */ .fp-link-muted { font-size: 12px; color: var(--fp-text-muted); text-decoration: none; } .fp-link-muted:hover { text-decoration: underline; } .fp-link-strong { font-size: 13px; font-weight: 600; color: var(--fp-accent-soft); text-decoration: none; } .fp-link-strong:hover { text-decoration: underline; } /* Alertas */ .fp-alert-error { margin-top: 10px; margin-bottom: 4px; border-radius: 12px; padding: 8px 12px; font-size: 12px; color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca; } /* =============================== LOGIN FARMY PRO =============================== */ .fp-login-shell { width: 100%; max-width: 1120px; padding: 28px 16px 32px; display: flex; flex-direction: column; gap: 18px; } .fp-login-header { display: flex; flex-direction: column; gap: 4px; } .fp-login-caption { margin: 0; font-size: 12px; color: var(--fp-text-muted); } /* Layout login */ .fp-login-main { display: grid; grid-template-columns: minmax(0,1.1fr); gap: 18px; } .fp-login-card { border-radius: var(--fp-radius-lg); background: rgba(255,255,255,.98); border: 1px solid var(--fp-border); padding: 20px 20px 22px; box-shadow: var(--fp-shadow-card); } .fp-login-card-header h1 { margin: 0 0 4px; font-size: 20px; font-weight: 800; } .fp-login-card-header p { margin: 0; font-size: 13px; color: var(--fp-text-muted); } /* Form login */ .fp-form { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; } .fp-form-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .fp-form-footer { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .fp-login-extra { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fp-border); font-size: 12px; display: flex; justify-content: space-between; gap: 8px; } /* Lado derecho login */ .fp-login-aside { display: none; border-radius: var(--fp-radius-lg); padding: 20px 22px; background: radial-gradient(circle at top left,#4f46e5 0,#020617 55%); color: #f9fafb; box-shadow: var(--fp-shadow-hero); } .fp-pill-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--fp-radius-pill); border: 1px solid rgba(226,232,240,.45); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; } .fp-login-aside h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; } .fp-login-aside p { margin: 0 0 10px; font-size: 13px; color: #e5e7eb; } .fp-feature-list { list-style: none; padding: 0; margin: 0; font-size: 13px; display: flex; flex-direction: column; gap: 6px; } .fp-feature-list li { display: flex; gap: 6px; } /* Footer login */ .fp-login-footer { margin-top: 4px; font-size: 11px; color: var(--fp-text-muted); } /* =============================== DASHBOARD FARMY PRO =============================== */ .fp-shell { min-height: 100vh; display: flex; flex-direction: column; } /* Topbar */ .fp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--fp-border); } .fp-topbar-left { display: flex; flex-direction: column; gap: 2px; } .fp-topbar-subtitle { margin: 0; font-size: 12px; color: var(--fp-text-muted); } /* Search bar */ .fp-topbar-center { flex: 1; max-width: 520px; } .fp-search { display: flex; align-items: center; gap: 8px; border-radius: var(--fp-radius-pill); border: 1px solid var(--fp-border); padding: 6px 14px; background: var(--fp-card-soft); } .fp-search-icon { font-size: 14px; color: #9ca3af; } .fp-search input { flex: 1; border: none; outline: none; font-size: 13px; background: transparent; } /* Perfil usuario */ .fp-topbar-right { display: flex; align-items: center; gap: 10px; } .fp-user-menu { position: relative; } .fp-user-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--fp-radius-pill); border: none; background: #f3f4f6; padding: 4px 10px 4px 4px; cursor: pointer; font-size: 12px; box-shadow: 0 4px 12px rgba(15,23,42,.12); } .fp-user-avatar { width: 28px; height: 28px; border-radius: 999px; background: #0f172a; color: #f9fafb; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; } .fp-user-name { display: none; } .fp-user-caret { font-size: 11px; color: #9ca3af; } .fp-user-dropdown { position: absolute; right: 0; margin-top: 6px; width: 240px; border-radius: 16px; background: var(--fp-card); border: 1px solid var(--fp-border); box-shadow: 0 18px 45px rgba(15,23,42,.25); font-size: 12px; } .fp-hidden { display: none; } .fp-user-dropdown-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .fp-user-avatar-lg { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg,var(--fp-primary),var(--fp-primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .fp-user-title { margin: 0; font-weight: 600; } .fp-user-email { margin: 0; font-size: 11px; color: var(--fp-text-muted); } .fp-user-links { display: flex; flex-direction: column; padding: 6px 0; } .fp-user-link { padding: 5px 12px; text-decoration: none; color: var(--fp-text); } .fp-user-link:hover { background: var(--fp-card-soft); } .fp-user-logout { display: block; padding: 6px 12px 10px; text-decoration: none; color: #ef4444; font-size: 11px; } .fp-user-logout:hover { background: #fee2e2; } /* Layout principal */ .fp-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 0; flex: 1; } /* Sidebar */ .fp-sidebar { border-right: 1px solid var(--fp-border); background: #f9fafb; padding: 16px 14px; } .fp-sidebar-label { margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9ca3af; } .fp-sidebar-nav { display: flex; flex-direction: column; gap: 6px; } .fp-sidebar-item { display: block; border-radius: 999px; padding: 8px 14px; font-size: 13px; color: #4b5563; text-decoration: none; } .fp-sidebar-item:hover { background: #e5e7eb; } .fp-sidebar-item-active { background: #0f172a; color: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.6); } /* Main */ .fp-main { padding: 18px 24px 24px; } /* HERO */ .fp-hero-card { border-radius: var(--fp-radius-lg); padding: 18px 22px; background: radial-gradient(circle at top left,#4f46e5 0,#020617 60%); color: #f9fafb; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; box-shadow: var(--fp-shadow-hero); } .fp-hero-eyebrow { margin: 0 0 2px; font-size: 12px; color: #a5b4fc; } .fp-hero-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; } .fp-hero-text { margin: 0; font-size: 13px; color: #e5e7eb; } .fp-hero-pill { align-self: flex-start; border-radius: 18px; padding: 8px 12px; background: rgba(15,23,42,.9); border: 1px solid rgba(148,163,184,.6); font-size: 12px; } .fp-hero-pill span { display: block; font-size: 11px; color: #9ca3af; } /* GRID CARDS */ .fp-grid { display: grid; gap: 12px; } .fp-card-metric { border-radius: var(--fp-radius-lg); background: var(--fp-card); border: 1px solid var(--fp-border); box-shadow: var(--fp-shadow-card); padding: 14px 16px; } .fp-card-label { margin: 0 0 4px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9ca3af; } .fp-card-number { margin: 0 0 4px; font-size: 22px; font-weight: 800; } .fp-card-text { margin: 0; font-size: 12px; color: var(--fp-text-muted); } /* FOOTER */ .fp-footer { border-top: 1px solid var(--fp-border); padding: 10px 24px 12px; font-size: 11px; color: var(--fp-text-muted); } /* =============================== FILTROS AVANZADOS (SILKET STYLE) =============================== */ .fp-filters { margin-bottom: 14px; padding: 16px 18px; border-radius: var(--fp-radius-lg); background: var(--fp-card); border: 1px solid var(--fp-border); box-shadow: var(--fp-shadow-card); } .fp-filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .fp-filters-header h2 { margin: 0; font-size: 14px; font-weight: 700; } .fp-filters-close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: var(--fp-text-muted); } /* Grid de filtros */ .fp-filters-grid { display: grid; gap: 10px; } .fp-filter-item label { @apply fp-label; } .fp-filter-item .fp-label { margin-bottom: 4px; } .fp-filters-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 6px; align-items: center; } .fp-filters-dash { font-size: 13px; color: var(--fp-text-muted); } /* Footer filtros */ .fp-filters-footer { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; border-top: 1px solid var(--fp-border); padding-top: 8px; } .fp-filters-actions { display: flex; justify-content: flex-end; gap: 8px; } .fp-filters-reset { border: none; background: transparent; font-size: 13px; color: var(--fp-text-muted); cursor: pointer; } .fp-filters-reset:hover { text-decoration: underline; } /* =============================== RESPONSIVE =============================== */ @media (min-width: 768px) { .fp-login-main { grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); } .fp-login-aside { display: block; } .fp-form-footer { flex-direction: row; align-items: center; justify-content: space-between; } } @media (min-width: 900px) { .fp-user-name { display: inline; } .fp-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .fp-filters-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width: 768px) { .fp-layout { grid-template-columns: minmax(0,1fr); } .fp-sidebar { display: none; } .fp-main { padding: 16px 12px 20px; } .fp-hero-card { flex-direction: column; } } /* Centrado y márgenes bonitos solo para la página de login */ .fp-login-page { display: flex; justify-content: center; } .fp-login-shell { width: 100%; max-width: 1120px; margin: 20px 16px 28px; /* centrado horizontal + aire arriba/abajo */ } /* Ajuste específico para pantallas chicas (como tu Xiaomi) */ @media (max-width: 600px) { .fp-login-shell { margin: 16px 10px 24px; padding: 20px 14px 22px; border-radius: 20px; } } /* === Ajustes del menú de usuario en móviles === */ @media (max-width: 768px) { /* Topbar se acomoda mejor en 2 filas */ .fp-topbar { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; } .fp-topbar-center { order: 3; width: 100%; } .fp-topbar-right { margin-left: auto; } /* El dropdown deja de ser "pegado" al botón y se vuelve un popup fijo dentro de la pantalla */ .fp-user-dropdown { position: fixed; top: 64px; /* un poco debajo de la barra superior */ right: 12px; width: min(260px, 90vw); /* nunca más ancho que la pantalla */ max-height: 60vh; /* si es muy alto, que tenga scroll */ overflow-y: auto; z-index: 9999; /* por encima de todo */ border-radius: 18px; } }