/* ========================================================= Rasta Pets – base.css Diseño Veterinario Minimalista / Soft UI Paleta: Verde menta + Azul profesional + Blanco ========================================================= */ /* ------------------ Fuente -------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); /* ------------------ Variables de tema -------------------- */ :root { /* Colores principales */ --color-primary: #22c7a9; --color-primary-hover: #16a88e; --color-primary-soft: #e9fbf7; --color-secondary: #102a56; --color-secondary-soft: #eef5ff; /* Fondos */ --color-bg: #f6f9fc; --color-bg-soft: #f9fbfd; --color-surface: #ffffff; --color-surface-soft: #f4fcfa; /* Textos */ --color-text: #102a56; --color-muted: #7b8ba8; --color-muted-light: #a6b3c9; /* Bordes */ --color-border: #e3eaf3; --color-border-soft: #eef3f8; /* Estados */ --color-success: #22c55e; --color-success-soft: #ecfdf5; --color-danger: #ef4444; --color-danger-soft: #fff1f2; --color-warning: #f59e0b; --color-warning-soft: #fffbeb; --color-info: #2563eb; --color-info-soft: #eff6ff; /* Radios */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-full: 999px; /* Sombras suaves */ --shadow-xs: 0 4px 12px rgba(16, 42, 86, 0.04); --shadow-sm: 0 10px 28px rgba(16, 42, 86, 0.06); --shadow-md: 0 18px 45px rgba(16, 42, 86, 0.08); --shadow-primary: 0 12px 28px rgba(34, 199, 169, 0.22); /* Transiciones */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* Focus */ --focus-primary: rgba(34, 199, 169, 0.16); /* Charts */ --chart-1: #22c7a9; --chart-2: #2563eb; --chart-3: #8b5cf6; --chart-4: #f59e0b; } /* ------------------ Dark mode opcional ------------------- */ /* Actívalo con: */ :root[data-theme="dark"] { --color-bg: #0f172a; --color-bg-soft: #111827; --color-surface: #111827; --color-surface-soft: #152033; --color-text: #e5edf8; --color-muted: #94a3b8; --color-muted-light: #64748b; --color-border: #243247; --color-border-soft: #1f2937; --color-primary: #35e0c0; --color-primary-hover: #22c7a9; --color-primary-soft: rgba(34, 199, 169, 0.14); --color-secondary: #e5edf8; --color-secondary-soft: rgba(37, 99, 235, 0.12); --shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.24); --shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.32); --shadow-md: 0 20px 55px rgba(0, 0, 0, 0.42); --focus-primary: rgba(53, 224, 192, 0.18); } /* ------------------ Reset base -------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; color: var(--color-text); background: radial-gradient(circle at top right, rgba(34, 199, 169, 0.08), transparent 34%), var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #app-root { min-height: 100vh; } button, input, select, textarea { font: inherit; } img, svg { max-width: 100%; } /* ------------------ Selección -------------------- */ ::selection { background: rgba(34, 199, 169, 0.22); color: var(--color-text); } /* ------------------ Enlaces ------------------------------- */ a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); } a:hover { color: var(--color-primary-hover); } a:focus-visible { outline: 3px solid var(--focus-primary); outline-offset: 3px; border-radius: var(--radius-xs); } /* ------------------ Títulos ------------------------------- */ h1, h2, h3, h4, h5, h6 { color: var(--color-text); margin-top: 0; line-height: 1.15; letter-spacing: -0.03em; } h1 { font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 800; } h2 { font-size: 1.45rem; font-weight: 800; } h3 { font-size: 1.15rem; font-weight: 700; } p { margin-top: 0; color: var(--color-muted); } /* ------------------ Botones ------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 11px 18px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-weight: 700; font-size: 0.94rem; cursor: pointer; user-select: none; box-shadow: var(--shadow-xs); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-primary { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); box-shadow: var(--shadow-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-accent { background: linear-gradient(135deg, var(--color-primary), #42d6bd); color: #ffffff; border-color: transparent; box-shadow: var(--shadow-primary); } .btn-accent:hover { filter: brightness(1.02); } .btn-outline { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); box-shadow: var(--shadow-xs); } .btn-outline:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); border-color: rgba(34, 199, 169, 0.35); } .btn-danger { background: var(--color-danger); color: #ffffff; border-color: var(--color-danger); } .btn-danger-light { background: var(--color-danger-soft); color: var(--color-danger); border-color: #fecdd3; } /* ------------------ Formularios --------------------------- */ label { display: inline-block; margin-bottom: 7px; color: var(--color-muted); font-size: 0.9rem; font-weight: 600; } input, select, textarea { width: 100%; min-height: 50px; padding: 12px 15px; color: var(--color-text); background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } textarea { min-height: 110px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--color-muted-light); } input:hover, select:hover, textarea:hover { border-color: #cfd9e8; } input:focus, select:focus, textarea:focus { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--focus-primary); } input:disabled, select:disabled, textarea:disabled { background: #eef3f8; color: var(--color-muted); cursor: not-allowed; } /* ------------------ Chips / Badges ------------------------ */ .badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-full); border: 1px solid rgba(34, 199, 169, 0.25); background: var(--color-primary-soft); color: var(--color-primary-hover); font-size: 0.84rem; font-weight: 700; } .badge.pink { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; } .badge.info { background: var(--color-info-soft); color: var(--color-info); border-color: #bfdbfe; } .badge.warn { background: var(--color-warning-soft); color: #b45309; border-color: #fde68a; } .badge.danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: #fecdd3; } /* ------------------ Tarjetas y paneles -------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 1.5rem; } .card h2, .card h3 { margin-bottom: 10px; } .card-soft { background: var(--color-surface-soft); border: 1px solid rgba(34, 199, 169, 0.14); border-radius: var(--radius-lg); padding: 1.25rem; } /* ------------------ KPI Dashboard -------------------- */ .kpi { display: grid; gap: 10px; padding: 22px; min-height: 140px; background: linear-gradient(180deg, #ffffff, #fbfefd); border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .kpi .label { color: var(--color-muted); font-size: 0.94rem; font-weight: 600; } .kpi .value { color: var(--color-text); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; } .kpi .hint { color: var(--color-muted); font-size: 0.9rem; } /* ------------------ Tablas ------------------------------- */ .table-responsive { width: 100%; overflow-x: auto; } table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface); font-size: 0.94rem; } th, td { padding: 14px 16px; border-bottom: 1px solid var(--color-border-soft); text-align: left; vertical-align: middle; } th { background: var(--color-primary-soft); color: #158c78; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.01em; } th:first-child { border-top-left-radius: var(--radius-md); } th:last-child { border-top-right-radius: var(--radius-md); } tr:hover td { background: rgba(34, 199, 169, 0.045); } /* ------------------ Sidebar ---------------- */ .sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border-soft); box-shadow: var(--shadow-xs); } .sidebar .item { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px 14px; border-radius: var(--radius-md); color: var(--color-muted); font-weight: 700; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .sidebar .item:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); transform: translateX(2px); } .sidebar .item.is-active { background: var(--color-primary-soft); color: #158c78; font-weight: 800; } .sidebar .item.is-active svg, .sidebar .item:hover svg { color: var(--color-primary-hover); } /* ------------------ Alertas / estados -------------------- */ .alert { display: flex; align-items: flex-start; gap: 4px; color: #ffffff; border: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); overflow: visible; /* so bubble can overflow */ background: var(--alert-bg); } .alert.success { --alert-bg: #12a15a; --alert-splat: #0e7d45; --alert-bubble: #0c6839; } .alert.info, .alert.alert-info { --alert-bg: #006edf; --alert-splat: #005bb7; --alert-bubble: #0051a8; } .alert.warn, .alert.alert-warning { --alert-bg: #f37a20; --alert-splat: #be5a11; --alert-bubble: #a14707; } .alert.danger, .alert.alert-danger, .alert.alert-error { --alert-bg: #d9384e; --alert-splat: #a72436; --alert-bubble: #8a1928; } /* Background splat pattern for inline alerts */ .alert::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 90px; pointer-events: none; border-top-left-radius: inherit; border-bottom-left-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMinYMid slice'%3E%3Cpath d='M 0 0 C 35 15, 30 45, 15 65 C 5 80, 20 90, 0 100 Z' fill='rgba(0,0,0,0.15)'%3E%3C/path%3E%3Ccircle cx='15' cy='20' r='4.5' fill='rgba(0,0,0,0.15)'%3E%3C/circle%3E%3Ccircle cx='38' cy='40' r='3' fill='rgba(0,0,0,0.15)'%3E%3C/circle%3E%3Ccircle cx='28' cy='72' r='5' fill='rgba(0,0,0,0.15)'%3E%3C/circle%3E%3C/svg%3E"); background-size: cover; z-index: 1; } /* Floating speech bubble icon for inline alerts */ .alert::after { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background-color: var(--alert-bubble); color: #ffffff; display: flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 800; font-size: 15px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); z-index: 2; } .alert.success::after { content: '✓'; } .alert.info::after, .alert.alert-info::after { content: '?'; } .alert.warn::after, .alert.alert-warning::after { content: '!'; } .alert.danger::after, .alert.alert-danger::after, .alert.alert-error::after { content: '✕'; } /* ------------------ Banners Caja -------------------- */ #caja-cerrada-banner { position: fixed; top: 24px; right: 24px; z-index: 999999; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 320px; max-width: 420px; padding: 22px 24px 18px 75px; background: var(--toast-error-bg, #d9384e); color: #ffffff; border-radius: 24px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.16); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; line-height: 1.45; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: visible; } /* Background splat pattern for caja cerrada banner */ #caja-cerrada-banner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 120px; pointer-events: none; border-top-left-radius: inherit; border-bottom-left-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMinYMid slice'%3E%3Cpath d='M 0 0 C 35 15, 30 45, 15 65 C 5 80, 20 90, 0 100 Z' fill='%23a72436'/%3E%3Ccircle cx='15' cy='20' r='4.5' fill='%23a72436'/%3E%3Ccircle cx='38' cy='40' r='3' fill='%23a72436'/%3E%3Ccircle cx='28' cy='72' r='5' fill='%23a72436'/%3E%3Ccircle cx='8' cy='85' r='2' fill='%23a72436'/%3E%3C/svg%3E"); background-size: cover; z-index: 1; } /* Floating speech bubble icon for caja cerrada banner */ #caja-cerrada-banner::after { content: '!'; position: absolute; top: -12px; left: 22px; width: 36px; height: 36px; border-radius: 50%; background-color: var(--toast-error-bubble, #8a1928); color: #ffffff; display: flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 800; font-size: 18px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); z-index: 3; } #caja-cerrada-banner.minimized::before, #caja-cerrada-banner.minimized::after { display: none; } #caja-cerrada-banner.minimized { width: 48px; height: 48px; min-width: 48px; max-width: 48px; padding: 0; justify-content: center; background: var(--toast-error-bubble, #8a1928); border: none; border-radius: 50%; box-shadow: 0 8px 22px rgba(217, 56, 78, 0.4); } #caja-cerrada-banner.minimized .caja-banner-text { display: none; } #caja-banner-toggle { margin-left: auto; padding: 2px; background: transparent; border: none; color: rgba(255, 255, 255, 0.8); font-size: 16px; cursor: pointer; z-index: 2; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 24px; height: 24px; } #caja-banner-toggle:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.15); } #caja-cerrada-banner.minimized #caja-banner-toggle { width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.2rem; } #caja-cerrada-banner[hidden] { display: none !important; } #caja-abierta-toast { position: fixed; top: 20px; right: 20px; display: flex; align-items: center; gap: 12px; max-width: 330px; padding: 16px; background: var(--color-success-soft); color: #047857; border-left: 4px solid var(--color-success); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 10000; font-size: 0.95rem; font-weight: 700; opacity: 0; pointer-events: none; transform: translateX(100%); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } #caja-abierta-toast::before { content: "✅"; font-size: 1.35rem; } #caja-abierta-toast.show { opacity: 1; pointer-events: auto; transform: translateX(0); } /* ------------------ Scrollbar moderno ------------------- */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(123, 139, 168, 0.35); border-radius: 20px; } ::-webkit-scrollbar-thumb:hover { background: rgba(123, 139, 168, 0.58); } /* ------------------ Utilidades ---------------------------- */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--color-muted); } .text-primary { color: var(--color-primary); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } .bg-soft { background: var(--color-bg-soft); } .bg-primary-soft { background: var(--color-primary-soft); } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .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; } /* ========================================================= Rasta Pets – Fondo decorativo de patitas Patrón real de huellas para todas las páginas ========================================================= */ /* ------------------ Variables del fondo ------------------ */ :root { --paw-bg-base: var(--color-bg, #f6f9fc); --paw-pattern-size: 520px 520px; --paw-pattern-opacity: 0.25; } /* Dark mode opcional */ :root[data-theme="dark"] { --paw-bg-base: #0f172a; --paw-pattern-opacity: 0.16; } /* ------------------ Fondo base del body ------------------ */ body { background: var(--paw-bg-base); } /* ------------------ Páginas donde aparecerán las patitas ------------------ */ .page, .clients-page, .reports-page, .page-usuarios, .page.dashboard, .page.servicios, .page.servicios-dia, .page.mascotas, .page.caja, .page.configuracion { position: relative; isolation: isolate; overflow: visible; } /* ------------------ Fondo suave de cada página ------------------ */ .page::before, .clients-page::before, .reports-page::before, .page-usuarios::before, .page.dashboard::before, .page.servicios::before, .page.servicios-dia::before, .page.mascotas::before, .page.caja::before, .page.configuracion::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at top right, rgba(34, 199, 169, 0.12), transparent 34%), radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.07), transparent 32%), var(--paw-bg-base); } /* ------------------ Patrón real de patitas ------------------ */ .page::after, .clients-page::after, .reports-page::after, .page-usuarios::after, .page.dashboard::after, .page.servicios::after, .page.servicios-dia::after, .page.mascotas::after, .page.caja::after, .page.configuracion::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--paw-pattern-opacity); background-image: url("data:image/svg+xml,%3Csvg width='520' height='520' viewBox='0 0 520 520' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2322c7a9'%3E%3Cg opacity='0.95' transform='translate(52 48) rotate(-22) scale(0.62)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.65' transform='translate(330 80) rotate(18) scale(0.50)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.75' transform='translate(170 225) rotate(34) scale(0.58)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.55' transform='translate(405 330) rotate(-35) scale(0.48)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.70' transform='translate(70 410) rotate(12) scale(0.52)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 520px 520px; background-position: 25px 40px; background-repeat: repeat; } /* ------------------ Asegura que el contenido quede encima ------------------ */ .page > *, .clients-page > *, .reports-page > *, .page-usuarios > *, .page.dashboard > *, .page.servicios > *, .page.servicios-dia > *, .page.mascotas > *, .page.caja > *, .page.configuracion > * { position: relative; z-index: 1; } /* ========================================================= Fondo de patitas para Login ========================================================= */ body.login-page { position: relative; isolation: isolate; overflow: hidden; background: var(--paw-bg-base); } body.login-page::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at top left, rgba(34, 199, 169, 0.16), transparent 34%), radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.10), transparent 32%), var(--paw-bg-base); } body.login-page::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.22; background-image: url("data:image/svg+xml,%3Csvg width='520' height='520' viewBox='0 0 520 520' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2322c7a9'%3E%3Cg opacity='0.95' transform='translate(52 48) rotate(-22) scale(0.62)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.65' transform='translate(330 80) rotate(18) scale(0.50)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.75' transform='translate(170 225) rotate(34) scale(0.58)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.55' transform='translate(405 330) rotate(-35) scale(0.48)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.70' transform='translate(70 410) rotate(12) scale(0.52)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 520px 520px; background-position: 25px 40px; background-repeat: repeat; } /* ========================================================= Ajuste para que las páginas no tapen el fondo global ========================================================= */ .page.dashboard, .page.servicios, .page.servicios-dia, .page.mascotas, .page.caja, .page.configuracion, .clients-page, .reports-page, .page-usuarios { background: transparent !important; } /* ------------------ Responsive base -------------------- */ @media (max-width: 768px) { body { font-size: 15px; } .card, .kpi { border-radius: var(--radius-lg); padding: 1.15rem; } .btn { width: 100%; } th, td { padding: 12px; } }