/* ============================================================ CHUBI APP — SISTEMA DE DISEÑO GLOBAL ("Soft moderno orgánico") Tokens, reset, tipografía y componentes compartidos. Se enlaza en el de cada plantilla, ANTES del CSS propio de esa página, para que herede estas variables. No contiene selectores de página: solo fundamentos + componentes reutilizables (botones, tarjetas, formularios, badges, tablas...). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ---- Color de marca (paleta corporativa existente, consolidada) ---- */ --color-primary: #508944; --color-primary-dark: #3f7036; --color-primary-light: #eef7e5; --color-accent: #9ccd7f; --color-accent-dark: #8db46f; --color-accent-light: #a3d197; /* ---- Superficies ---- */ --color-bg: #f0f5e1; --color-surface: #ffffff; --color-surface-soft: #f8fbf3; --color-surface-alt: #eef7e5; --color-border: #d8e6d1; --color-border-strong: #c3d6ba; /* ---- Texto ---- */ --color-text: #1f2c23; --color-text-muted: #5b6a5f; --color-text-faint: #869184; --color-text-inverse: #ffffff; /* ---- Semántico ---- */ --color-success: #28a745; --color-success-bg: #e9f7ec; --color-warning: #ba8a05; --color-warning-bg: #fdf3d9; --color-info: #2f6c97; --color-info-bg: #e8f2f8; --color-danger: #c74848; --color-danger-dark: #a63a3a; --color-danger-bg: #fbeaea; /* ---- Radios ---- */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* ---- Sombras (tinte verde, muy suaves) ---- */ --shadow-xs: 0 1px 2px rgba(31, 44, 35, .05); --shadow-sm: 0 2px 10px rgba(31, 44, 35, .06); --shadow-md: 0 10px 28px rgba(31, 44, 35, .09); --shadow-lg: 0 20px 48px rgba(31, 44, 35, .16); --shadow-focus: 0 0 0 4px rgba(80, 137, 68, .22); --shadow-glow-primary: 0 12px 28px rgba(80, 137, 68, .35); /* ---- Espaciado (escala 4px) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---- Tipografía ---- */ --font-heading: 'Manrope', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --text-xs: clamp(.75rem, .72rem + .15vw, .8125rem); --text-sm: clamp(.8125rem, .78rem + .2vw, .9375rem); --text-base: clamp(.9375rem, .9rem + .25vw, 1.0625rem); --text-md: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); --text-lg: clamp(1.1875rem, 1.1rem + .5vw, 1.4375rem); --text-xl: clamp(1.4375rem, 1.3rem + .8vw, 1.875rem); --text-2xl: clamp(1.75rem, 1.5rem + 1.4vw, 2.5rem); --text-3xl: clamp(2.125rem, 1.7rem + 2.2vw, 3.25rem); /* ---- Movimiento ---- */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* Rebote juguetón: reservado para micro-interacciones ("delight"): botones, badges, estados de éxito, avatar. El movimiento estructural (sidebar, menú, scrim) sigue usando --ease-out para no marear. */ --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 320ms; /* ---- Capas ---- */ --z-nav: 100; --z-dropdown: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* ---- Layout ---- */ --container-max: 1200px; --container-pad: clamp(16px, 4vw, 32px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================ RESET LIGERO ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* El atributo nativo `hidden` deja de funcionar en cuanto una clase propia (.alert, .badge, .card...) fija su propio `display`, porque una regla de autor gana siempre a la hoja de estilos del navegador — y en ============================================================ */ .icon-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--color-primary-light); color: var(--color-primary-dark); } .icon-chip-sm { width: 36px; height: 36px; } .icon-chip-lg { width: 64px; height: 64px; } .icon-chip .icon { width: 45%; height: 45%; } .icon-chip-primary { background: var(--color-primary-light); color: var(--color-primary-dark); } .icon-chip-accent { background: var(--color-accent-light); color: var(--color-primary-dark); } .icon-chip-success { background: var(--color-success-bg); color: var(--color-success); } .icon-chip-warning { background: var(--color-warning-bg); color: var(--color-warning); } .icon-chip-info { background: var(--color-info-bg); color: var(--color-info); } .icon-chip-danger { background: var(--color-danger-bg); color: var(--color-danger); } .icon-chip-pop { animation: chubi-pop-in var(--duration-slow) var(--ease-bounce); } /* ============================================================ MENÚ CONTEXTUAL (kebab, sin JS —

) Patrón por defecto para esconder acciones secundarias: funciona igual con clic o toque, no depende de hover. ============================================================ */ .menu { position: relative; display: inline-block; } .menu > summary { list-style: none; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary::marker { content: ""; } .menu[open] > summary { background: var(--color-surface-alt); color: var(--color-primary-dark); } .menu-backdrop-catcher { position: fixed; inset: 0; z-index: calc(var(--z-dropdown) - 1); display: none; } .menu[open] .menu-backdrop-catcher { display: block; } .menu-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; display: grid; gap: 2px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); animation: chubi-menu-in var(--duration-fast) var(--ease-out); } .menu-panel.align-left { right: auto; left: 0; } .menu-panel a, .menu-panel button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .menu-panel a:hover, .menu-panel button:hover { background: var(--color-surface-alt); } .menu-panel .icon { color: var(--color-text-muted); } .menu-panel a.danger, .menu-panel button.danger { color: var(--color-danger); } .menu-panel a.danger .icon, .menu-panel button.danger .icon { color: var(--color-danger); } .menu-panel form { margin: 0; } .menu-panel hr { margin: 4px 6px; border: none; border-top: 1px solid var(--color-border); } @keyframes chubi-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================ ACCIONES DE FILA/TARJETA Una acción principal siempre visible + el resto tras el kebab. (Nunca "solo al hover": no funciona con dedo, ver row-actions). ============================================================ */ .row-actions { display: flex; align-items: center; gap: var(--space-2); } /* ============================================================ APP SHELL — layout de paneles con barra lateral ============================================================ */ .app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100dvh; } .app-sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-4); background: var(--color-surface); border-right: 1px solid var(--color-border); overflow-y: auto; } .app-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: var(--space-2) var(--space-3); margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) 0; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent-light) 100%); font-family: var(--font-heading); font-weight: 800; font-size: var(--text-md); color: var(--color-primary-dark); text-decoration: none; } .app-sidebar-brand img { width: 34px; height: 34px; border-radius: var(--radius-sm); } .app-sidebar-brand .icon-lg { color: var(--color-primary); } .app-sidebar-section { display: grid; gap: 2px; } .app-sidebar-label { padding: 0 12px; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); } .app-sidebar-nav { display: grid; gap: 2px; } .app-sidebar-nav a, .app-sidebar-nav .app-nav-form button, .app-sidebar-footer a, .app-sidebar-footer .app-nav-form button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .app-sidebar-nav a:hover, .app-sidebar-footer a:hover, .app-nav-form button:hover { background: var(--color-surface-alt); color: var(--color-text); } .app-sidebar-nav a.is-active { position: relative; background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; } .app-sidebar-nav a.is-active::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 4px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--color-primary); } /* Cada item de nav lleva su icono en una píldora de color — no solo el activo — para que la sidebar se lea "viva" de un vistazo, no como una lista de texto plano con iconos finos. */ .app-sidebar-nav a .icon { color: var(--color-primary); background: var(--color-primary-light); border-radius: var(--radius-pill); padding: 6px; width: 32px; height: 32px; flex-shrink: 0; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-bounce); } .app-sidebar-nav a:hover .icon { background: var(--color-accent-light); transform: scale(1.08) rotate(-4deg); } .app-sidebar-nav a.is-active .icon { background: var(--color-primary); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); transform: none; } .app-sidebar-footer a .icon, .app-sidebar-footer .app-nav-form button .icon { color: var(--color-text-muted); background: var(--color-surface-alt); border-radius: var(--radius-pill); padding: 6px; width: 32px; height: 32px; flex-shrink: 0; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-bounce); } .app-sidebar-footer a:hover .icon, .app-sidebar-footer .app-nav-form button:hover .icon { background: var(--color-danger-bg); color: var(--color-danger); transform: scale(1.08); } .app-sidebar-nav .badge-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning); } .app-nav-form { margin: 0; } .app-sidebar-footer { margin-top: auto; display: grid; gap: 2px; } .app-main { min-width: 0; display: flex; flex-direction: column; } /* Topbar móvil de los paneles: solo visible <1024px */ .app-topbar { display: none; position: sticky; top: 0; z-index: var(--z-nav); align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px clamp(16px, 4vw, 24px); background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .app-topbar-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-md); color: var(--color-primary-dark); } .app-content { flex: 1; padding: var(--space-5) clamp(16px, 4vw, 32px) var(--space-8); } @media (max-width: 1024px) { .app-shell { grid-template-columns: 1fr; } .app-sidebar { position: fixed; inset: 0 auto 0 0; width: min(84vw, 320px); z-index: var(--z-overlay); transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-out); box-shadow: var(--shadow-lg); } .app-sidebar.is-open { transform: translateX(0); } .app-topbar { display: flex; } .app-content { padding-bottom: calc(var(--space-8) + 64px); } } .app-sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(15, 20, 15, .4); z-index: calc(var(--z-overlay) - 1); } .app-sidebar-scrim.is-visible { display: block; } /* ============================================================ BOTTOM NAV — navegación principal en móvil (PWA) Máximo 5 items, icono + etiqueta, safe-area para iOS. ============================================================ */ .bottom-nav { display: none; } @media (max-width: 1024px) { .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--color-border); padding: 6px clamp(4px, 2vw, 16px) calc(6px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); } .bottom-nav a, .bottom-nav .app-nav-form button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: none; background: transparent; color: var(--color-text-faint); font-size: 11px; font-weight: 700; text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; } .bottom-nav a.is-active { color: var(--color-primary-dark); } .bottom-nav a .icon { width: 22px; height: 22px; padding: 4px; border-radius: var(--radius-pill); transition: transform var(--duration-fast) var(--ease-bounce), background-color var(--duration-fast) var(--ease-out); box-sizing: content-box; } .bottom-nav a.is-active .icon { background: var(--color-primary-light); color: var(--color-primary); animation: chubi-pop-in var(--duration-base) var(--ease-bounce); } } /* ============================================================ DECORACIÓN ORGÁNICA — firma visual (hero, empty states) Solo decorativo: no interactivo, aria-hidden en el HTML. ============================================================ */ .organic-blob { position: absolute; z-index: 0; pointer-events: none; filter: blur(2px); opacity: .55; background: radial-gradient(circle at 30% 30%, var(--color-accent-light), transparent 60%), radial-gradient(circle at 70% 70%, var(--color-primary-light), transparent 55%); border-radius: 63% 37% 54% 46% / 43% 39% 61% 57%; animation: chubi-blob-drift 16s var(--ease-out) infinite alternate; } /* Variantes de tinte — mismos tokens semánticos ya existentes, para poder usar el motivo también en secciones de salud/veterinaria o avisos sin introducir colores nuevos. */ .organic-blob.tint-info { background: radial-gradient(circle at 30% 30%, var(--color-info-bg), transparent 60%), radial-gradient(circle at 70% 70%, var(--color-primary-light), transparent 55%); } .organic-blob.tint-warning { background: radial-gradient(circle at 30% 30%, var(--color-warning-bg), transparent 60%), radial-gradient(circle at 70% 70%, var(--color-accent-light), transparent 55%); } @keyframes chubi-blob-drift { from { border-radius: 63% 37% 54% 46% / 43% 39% 61% 57%; transform: rotate(0deg) scale(1); } to { border-radius: 40% 60% 62% 38% / 55% 45% 55% 45%; transform: rotate(8deg) scale(1.04); } } @media (prefers-reduced-motion: reduce) { .organic-blob { animation: none; } } /* Contenedor para agrupar 2-3 blobs de tamaños/opacidades distintos por sección (hero, empty-state) — sustituye el "un blob suelto" ad-hoc que se repetía copiado por página. */ .organic-blob-cluster { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .organic-blob-cluster .organic-blob.size-sm { width: 120px; height: 120px; opacity: .4; } .organic-blob-cluster .organic-blob.size-md { width: 220px; height: 220px; } .organic-blob-cluster .organic-blob.size-lg { width: 340px; height: 340px; opacity: .5; animation-duration: 22s; } /* Firma visual nueva: dos "lágrimas" que evocan las orejas del gato del logo, en vez del blob genérico — para esquinas de hero/empty-state/ status-card donde queremos que se note que es Chubi, no cualquier app. */ .organic-ears { position: absolute; z-index: 0; pointer-events: none; width: 160px; height: 160px; opacity: .5; } .organic-ears::before, .organic-ears::after { content: ""; position: absolute; width: 62%; height: 62%; background: var(--color-accent-light); border-radius: 60% 60% 0 60%; } .organic-ears::before { top: 0; left: 0; transform: rotate(-12deg); background: var(--color-accent-light); } .organic-ears::after { top: 6%; right: 0; transform: rotate(102deg) scaleX(-1); background: var(--color-primary-light); } .organic-frame { border-radius: 63% 37% 54% 46% / 43% 39% 61% 57%; overflow: hidden; } .organic-frame.alt { border-radius: 42% 58% 39% 61% / 57% 41% 59% 43%; } /* ============================================================ PESTAÑAS (tabs) — agrupar contenido en vez de amontonar acciones ============================================================ */ .tabs { display: flex; gap: 4px; padding: 4px; background: var(--color-surface-alt); border-radius: var(--radius-pill); width: fit-content; max-width: 100%; overflow-x: auto; } .tabs a, .tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 18px; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .tabs a.is-active, .tabs button.is-active { background: var(--color-surface); color: var(--color-primary-dark); box-shadow: var(--shadow-xs); } /* ============================================================ AVATAR / CUENTA ============================================================ */ .avatar-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); cursor: pointer; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .avatar-btn:hover { background: var(--color-surface-alt); border-color: var(--color-border-strong); } .avatar-btn .icon-sm { color: var(--color-text-muted); } .avatar-initials { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-text-inverse); font-size: 13px; font-weight: 800; flex-shrink: 0; } /* ============================================================ NAVBAR PÚBLICA COMPARTIDA (templates/_navbar.html) ============================================================ */ .site-header { position: sticky; top: 0; z-index: var(--z-nav); } .navbar .logo { display: flex; align-items: center; } .navbar .logo img { height: 40px; width: auto; } .nav-links-primary { display: flex; align-items: center; gap: var(--space-5); margin-inline: auto; } .nav-links-primary a { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); } .nav-links-primary a:hover { color: var(--color-primary-dark); } .nav-actions { display: flex; align-items: center; gap: var(--space-2); } .hamburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary-dark); cursor: pointer; } @media (max-width: 768px) { .hamburger { display: inline-flex; } } .mobile-nav-panel { display: grid; gap: 6px; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); padding: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base); } .mobile-nav-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-nav-panel a, .mobile-nav-panel button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-family: inherit; font-size: var(--text-base); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; } .mobile-nav-panel a:hover, .mobile-nav-panel button:hover { background: var(--color-surface-alt); } /* Mismo tratamiento de icono-en-píldora que la sidebar de los paneles (.app-sidebar-nav), para que la navegación se sienta como un único sistema en vez de dos estilos distintos según dónde estés. Cubre tanto como el