/* * RestSaaS — sistema de diseño (4.9.0) * * Tokens y componentes base del panel (/mi-negocio/ y wp-admin → Gestionar Negocio) * y de la web pública de la plataforma. * * REGLA DE ORO: todo cuelga de un scope. La tienda pública de cada comercio también * carga rs-global.css y rs-components.css, y su diseño lo elige el comercio: nada de * este archivo puede alcanzarla. Los scopes válidos son: * * .rs-dashboard el panel (en los dos contextos) * .rs-panel-page .rs-modal-overlay los modales del panel, que viven FUERA de * .rs-dashboard (body class del panel, ver * RESTSAAS_Core::body_class / admin_body_class) * .rs-marketing la web pública (body class + raíz de cada * shortcode de marketing) * .rs-auth-page registro, login y confirmación de cuenta * * Nunca un selector de elemento (input, table, h2…) fuera de .rs-dashboard o del modal: * en wp-admin `.rs-panel-page` es el y todo el chrome de WordPress cuelga de él. * * Los tokens nuevos no pisan los --rs-* globales que usa la tienda. Donde el panel * necesita otro valor para uno viejo (--rs-bg, --rs-border…) se redefine DENTRO del * scope, que es donde vale. */ /* ═══════════════════════════════════════════════════════════════════════ 1. TOKENS ═══════════════════════════════════════════════════════════════════════ */ .rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing, .rs-auth-page { /* Tipografía — Inter se carga de verdad (RESTSAAS_Core::inject_fonts). */ --rs-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --rs-font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; --rs-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --rs-font-features: "cv11", "ss01"; --rs-text-xs: 12px; --rs-text-sm: 13px; --rs-text-md: 15px; --rs-text-lg: 17px; --rs-text-xl: 21px; --rs-text-2xl: 28px; /* Escala de grises (neutros cálidos, estilo Apple). */ --rs-gray-50: #fafafc; --rs-gray-100: #f5f5f7; --rs-gray-200: #e8e8ed; --rs-gray-300: #d2d2d7; --rs-gray-400: #aeaeb2; --rs-gray-500: #8e8e93; --rs-gray-600: #6e6e73; --rs-gray-700: #48484a; --rs-gray-800: #2c2c2e; --rs-gray-900: #1d1d1f; /* Superficies. */ --rs-surface: #ffffff; --rs-surface-2: var(--rs-gray-50); --rs-surface-sunken: var(--rs-gray-100); --rs-surface-glass: rgba(255, 255, 255, .72); --rs-surface-dark: #1d1d1f; --rs-hairline: rgba(0, 0, 0, .07); --rs-hairline-strong: rgba(0, 0, 0, .12); --rs-input-border: #d2d2d7; --rs-glass-filter: saturate(180%) blur(20px); /* Radios. */ --rs-r-xs: 6px; --rs-r-sm: 10px; --rs-r-md: 14px; --rs-r-lg: 20px; --rs-r-xl: 28px; --rs-r-full: 999px; /* Elevación: sombras en capas, suaves. */ --rs-elev-1: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .02); --rs-elev-2: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 16px -4px rgba(0, 0, 0, .08); --rs-elev-3: 0 2px 6px rgba(0, 0, 0, .04), 0 16px 40px -8px rgba(0, 0, 0, .12); --rs-elev-4: 0 4px 12px rgba(0, 0, 0, .06), 0 32px 80px -12px rgba(0, 0, 0, .22); /* Movimiento. */ --rs-ease-out: cubic-bezier(.16, 1, .3, 1); --rs-ease-in-out: cubic-bezier(.65, 0, .35, 1); --rs-dur-1: 150ms; --rs-dur-2: 220ms; --rs-dur-3: 300ms; /* Estados semánticos (tonos del sistema). */ --rs-green: #1f9d55; --rs-green-bg: #e8f7ee; --rs-amber: #b25e09; --rs-amber-bg: #fdf3e2; --rs-red: #d70015; --rs-red-bg: #fdecee; --rs-blue: #0066cc; --rs-blue-bg: #e8f1fb; /* Anillo de foco: el primario al 20 %. El fallback es --rs-primary-light (≈10 %), que el panel inyecta con el color del comercio. */ --rs-ring-color: var(--rs-primary-light, rgba(0, 113, 227, .2)); --rs-ring: 0 0 0 4px var(--rs-ring-color); /* Redefinición de los tokens viejos, SÓLO dentro del scope. */ --rs-font-heading: var(--rs-font-display); --rs-font-body: var(--rs-font-sans); --rs-bg: var(--rs-gray-100); --rs-bg-alt: var(--rs-surface); --rs-text: var(--rs-gray-900); --rs-text-muted: var(--rs-gray-600); --rs-border: #e5e5ea; --rs-success: #1f9d55; --rs-danger: #e5484d; --rs-warning: #f5a524; --rs-shadow-sm: var(--rs-elev-1); --rs-shadow-md: var(--rs-elev-2); --rs-shadow-lg: var(--rs-elev-3); --rs-shadow-hover: var(--rs-elev-3); --rs-radius: var(--rs-r-sm); --rs-transition: all var(--rs-dur-2) var(--rs-ease-out); } @supports (color: color-mix(in srgb, red 20%, transparent)) { .rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing, .rs-auth-page { --rs-ring-color: color-mix(in srgb, var(--rs-primary) 20%, transparent); } } /* ═══════════════════════════════════════════════════════════════════════ 2. BASE TIPOGRÁFICA ═══════════════════════════════════════════════════════════════════════ */ .rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing, .rs-auth-page { font-family: var(--rs-font-sans); font-feature-settings: var(--rs-font-features); color: var(--rs-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(h1, h2, h3, h4, h5, h6) { font-family: var(--rs-font-display); font-feature-settings: var(--rs-font-features); letter-spacing: -0.02em; color: var(--rs-text); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(button, input, select, textarea) { font-family: inherit; } /* Números tabulares donde se comparan cifras. */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(.rs-table td, .rs-dash-stat-num, .rs-price, .rs-tabular) { font-variant-numeric: tabular-nums; } .rs-dashboard .rs-text-muted, .rs-panel-page .rs-modal-overlay .rs-text-muted { color: var(--rs-text-muted); } /* ═══════════════════════════════════════════════════════════════════════ 3. BOTONES — 36 px en escritorio, 44 px en táctil y en la web pública ═══════════════════════════════════════════════════════════════════════ */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 1px solid var(--rs-hairline-strong); border-radius: var(--rs-r-sm); background: var(--rs-surface); color: var(--rs-text); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: var(--rs-elev-1); box-sizing: border-box; transition: background-color var(--rs-dur-2) var(--rs-ease-out), border-color var(--rs-dur-2) var(--rs-ease-out), box-shadow var(--rs-dur-2) var(--rs-ease-out), transform var(--rs-dur-1) var(--rs-ease-out), filter var(--rs-dur-2) var(--rs-ease-out), opacity var(--rs-dur-1) linear; -webkit-tap-highlight-color: transparent; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn:hover { transform: none; background-color: var(--rs-gray-50); border-color: var(--rs-gray-300); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn:active { transform: scale(.97); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn:focus-visible { outline: none; box-shadow: var(--rs-ring); } /* Principal: el único lugar donde vive el color del negocio. */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn-primary { background: var(--rs-primary); border-color: transparent; color: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .14); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn-primary:hover { background: var(--rs-primary); border-color: transparent; filter: brightness(1.07); transform: none; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .14); } /* Secundario / fantasma: neutro, con borde de un pelo. */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(.rs-btn-ghost, .rs-btn-outline, .rs-btn-secondary) { background: var(--rs-surface); border: 1px solid var(--rs-hairline-strong); color: var(--rs-text) !important; box-shadow: var(--rs-elev-1); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(.rs-btn-ghost, .rs-btn-outline, .rs-btn-secondary):hover { background: var(--rs-gray-100); border-color: var(--rs-gray-300); color: var(--rs-text) !important; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn-danger { background: var(--rs-danger); border-color: transparent; color: #fff !important; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn-danger:hover { background: var(--rs-danger); filter: brightness(1.06); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn-sm { min-height: 30px; padding: 0 12px; font-size: 13px; border-radius: 8px; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn-lg { min-height: 44px; padding: 0 22px; font-size: 15px; border-radius: var(--rs-r-sm); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-btn-full { display: flex; width: 100%; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(.rs-btn[disabled], .rs-btn:disabled, .rs-btn.is-disabled) { opacity: .45; cursor: not-allowed; transform: none !important; filter: none; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-btn-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--rs-gray-600); cursor: pointer; transition: background-color var(--rs-dur-1) linear, color var(--rs-dur-1) linear, transform var(--rs-dur-1) var(--rs-ease-out); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-btn-icon:hover { background: var(--rs-gray-100); border-color: transparent; color: var(--rs-text); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-btn-icon:focus-visible { outline: none; box-shadow: var(--rs-ring); } /* ═══════════════════════════════════════════════════════════════════════ 4. FORMULARIOS ═══════════════════════════════════════════════════════════════════════ */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-form-group { margin-bottom: 16px; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-form-group > label { display: block; margin-bottom: 6px; font-size: var(--rs-text-sm); font-weight: 600; letter-spacing: -0.005em; color: var(--rs-gray-700); } /* Campos con clase conocida: tamaño completo. */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(.rs-input, .rs-select), :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-form-group :is( input:where(:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"])), select, textarea ) { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--rs-input-border); border-radius: var(--rs-r-sm); background-color: var(--rs-surface); color: var(--rs-text); font-family: inherit; font-size: var(--rs-text-md); line-height: 1.35; box-shadow: none; box-sizing: border-box; transition: border-color var(--rs-dur-2) var(--rs-ease-out), box-shadow var(--rs-dur-2) var(--rs-ease-out); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(.rs-input, .rs-select, .rs-form-group input, .rs-form-group select, .rs-form-group textarea)::placeholder { color: var(--rs-gray-400); } /* Campos sin clase dentro del panel: sólo borde, radio y foco, sin tocar tamaños (hay inputs compactos con medidas inline que no se pueden agrandar). */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is( input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea ) { border-color: var(--rs-input-border); border-radius: var(--rs-r-sm); font-family: inherit; color: var(--rs-text); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(input, select, textarea):focus, :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(.rs-input, .rs-select):focus, :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-form-group :is(input, select, textarea):focus { border-color: var(--rs-primary); outline: none; box-shadow: var(--rs-ring); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(.rs-select, select.rs-input, .rs-form-group select) { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; cursor: pointer; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) textarea.rs-input, :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-form-group textarea { min-height: 88px; resize: vertical; } /* Un checkbox suelto dentro de .rs-form-group no puede ocupar todo el ancho. */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-form-group input:is([type="checkbox"], [type="radio"]) { width: auto; padding: 0; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) input:is([type="checkbox"], [type="radio"]) { accent-color: var(--rs-primary); } /* ── Switch estilo iOS ── Los checkbox de configuración (.rs-checkbox / .rs-checkbox-label) se dibujan como interruptores. Es sólo CSS sobre el real: el valor, el name y los eventos siguen siendo los del checkbox. Los !important de medida le ganan al width/height inline que trae el markup del JS. */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-checkbox, .rs-checkbox-label) { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--rs-text-md); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-checkbox, .rs-checkbox-label) > input[type="checkbox"], :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) input[type="checkbox"].rs-switch-input { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 40px !important; height: 24px !important; min-height: 0; margin: 0 !important; padding: 0; border: 0; border-radius: var(--rs-r-full); background: var(--rs-gray-300); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); cursor: pointer; transition: background-color var(--rs-dur-2) var(--rs-ease-out); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-checkbox, .rs-checkbox-label) > input[type="checkbox"]::before, :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) input[type="checkbox"].rs-switch-input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform var(--rs-dur-2) var(--rs-ease-out); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-checkbox, .rs-checkbox-label) > input[type="checkbox"]:checked, :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) input[type="checkbox"].rs-switch-input:checked { background: var(--rs-success); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-checkbox, .rs-checkbox-label) > input[type="checkbox"]:checked::before, :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) input[type="checkbox"].rs-switch-input:checked::before { transform: translateX(16px); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-checkbox, .rs-checkbox-label) > input[type="checkbox"]:focus-visible, :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) input[type="checkbox"].rs-switch-input:focus-visible { outline: none; box-shadow: var(--rs-ring); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-checkbox, .rs-checkbox-label) > input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; } /* El switch que ya existía (.rs-switch + .rs-slider) adopta las mismas medidas. */ .rs-dashboard .rs-switch .rs-slider, .rs-panel-page .rs-modal-overlay .rs-switch .rs-slider { background-color: var(--rs-gray-300) !important; box-shadow: none; } .rs-dashboard .rs-switch input:checked + .rs-slider, .rs-panel-page .rs-modal-overlay .rs-switch input:checked + .rs-slider { background-color: var(--rs-success) !important; } /* ═══════════════════════════════════════════════════════════════════════ 5. TARJETAS ═══════════════════════════════════════════════════════════════════════ */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-dash-card, .rs-card, .rs-glass-panel) { background: var(--rs-surface); border: 1px solid var(--rs-hairline); border-radius: var(--rs-r-lg); box-shadow: var(--rs-elev-1); } .rs-dashboard .rs-dash-card { padding: 24px; } .rs-dashboard .rs-dash-card:hover { box-shadow: var(--rs-elev-2); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-dash-card :is(h3, h4) { font-size: var(--rs-text-lg); font-weight: 600; letter-spacing: -0.015em; } .rs-dashboard .rs-config-card { background: var(--rs-surface); border: 1px solid var(--rs-hairline); border-radius: var(--rs-r-lg); box-shadow: var(--rs-elev-1); } .rs-dashboard .rs-config-card:hover, .rs-dashboard .rs-config-card.is-expanded { border-color: var(--rs-hairline-strong); box-shadow: var(--rs-elev-2); } /* ═══════════════════════════════════════════════════════════════════════ 6. BADGES ═══════════════════════════════════════════════════════════════════════ */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) :is(.rs-pill, .rs-badge-status, .rs-plan-badge) { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--rs-r-full); font-size: 11.5px; font-weight: 600; line-height: 1.35; letter-spacing: 0; white-space: nowrap; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-pill { background: var(--rs-gray-100); color: var(--rs-gray-700); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-pill.is-success { background: var(--rs-green-bg); color: var(--rs-green); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-pill.is-warning { background: var(--rs-amber-bg); color: var(--rs-amber); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-pill.is-danger { background: var(--rs-red-bg); color: var(--rs-red); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) .rs-pill.is-accent { background: var(--rs-primary-light); color: var(--rs-primary); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-status-nuevo { background: var(--rs-blue-bg); color: var(--rs-blue); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-status-entregado { background: var(--rs-gray-100); color: var(--rs-gray-700); } /* ═══════════════════════════════════════════════════════════════════════ 7. SEGMENTED CONTROL `.rs-segmented` es el componente; `.rs-subtabs` (Variantes / Extras) lo adopta. El JS de las subpestañas escribe color y borde inline al hacer clic: por eso los !important de esta sección. ═══════════════════════════════════════════════════════════════════════ */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-segmented, .rs-subtabs) { display: inline-flex !important; flex-wrap: wrap; gap: 2px !important; padding: 3px !important; border: 0 !important; border-radius: var(--rs-r-sm); background: var(--rs-gray-200); max-width: 100%; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-segmented > button, .rs-segmented > a, .rs-subtabs .rs-subtab-btn) { appearance: none; min-height: 30px; padding: 5px 14px !important; border: 0 !important; border-radius: 8px; background: transparent !important; color: var(--rs-gray-700) !important; font-size: var(--rs-text-sm) !important; font-weight: 500 !important; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background-color var(--rs-dur-2) var(--rs-ease-out), box-shadow var(--rs-dur-2) var(--rs-ease-out), color var(--rs-dur-1) linear; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) :is(.rs-segmented > .active, .rs-segmented > [aria-selected="true"], .rs-subtabs .rs-subtab-btn.active) { background: var(--rs-surface) !important; color: var(--rs-text) !important; font-weight: 600 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04); } /* ═══════════════════════════════════════════════════════════════════════ 8. TABLAS — limpias, sin rejilla vertical ═══════════════════════════════════════════════════════════════════════ */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--rs-surface); border: 1px solid var(--rs-hairline); border-radius: var(--rs-r-md); box-shadow: var(--rs-elev-1); overflow: visible; font-size: 14px; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-table th { padding: 11px 16px; background: var(--rs-gray-50); border-bottom: 1px solid var(--rs-hairline); border-left: 0; border-right: 0; color: var(--rs-gray-600); font-size: var(--rs-text-xs); font-weight: 600; letter-spacing: .01em; text-transform: none; text-align: left; white-space: nowrap; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-table th:first-child { border-top-left-radius: var(--rs-r-md); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-table th:last-child { border-top-right-radius: var(--rs-r-md); } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-table td { padding: 13px 16px; border-bottom: 1px solid var(--rs-hairline); border-left: 0; border-right: 0; color: var(--rs-text); font-size: 14px; vertical-align: middle; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-table tr:last-child td { border-bottom: 0; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-table tbody tr:hover td { background: var(--rs-gray-50); } /* ═══════════════════════════════════════════════════════════════════════ 9. MODAL ═══════════════════════════════════════════════════════════════════════ */ .rs-panel-page .rs-modal-overlay { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); padding: 16px; box-sizing: border-box; } .rs-panel-page .rs-modal-overlay .rs-modal { background: var(--rs-surface); border: 1px solid var(--rs-hairline); border-radius: var(--rs-r-lg); box-shadow: var(--rs-elev-4); overflow: hidden; } .rs-panel-page .rs-modal-overlay .rs-modal-header { padding: 18px 24px; border-bottom: 1px solid var(--rs-hairline); background: var(--rs-surface); } .rs-panel-page .rs-modal-overlay .rs-modal-header h3 { font-size: var(--rs-text-lg); font-weight: 600; letter-spacing: -0.015em; } .rs-panel-page .rs-modal-overlay .rs-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--rs-gray-100); color: var(--rs-gray-600); font-size: 14px; line-height: 1; cursor: pointer; transition: background-color var(--rs-dur-1) linear, color var(--rs-dur-1) linear; } .rs-panel-page .rs-modal-overlay .rs-modal-close:hover { background: var(--rs-gray-200); color: var(--rs-text); } .rs-panel-page .rs-modal-overlay .rs-modal-body { padding: 24px; font-size: var(--rs-text-md); } .rs-panel-page .rs-modal-overlay .rs-modal-footer { border-top: 1px solid var(--rs-hairline); background: var(--rs-gray-50); } /* ═══════════════════════════════════════════════════════════════════════ 10. AVISOS ═══════════════════════════════════════════════════════════════════════ */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-alert { padding: 12px 14px; border: 1px solid var(--rs-hairline); border-radius: var(--rs-r-sm); background: var(--rs-gray-50); color: var(--rs-gray-700); font-size: 14px; line-height: 1.5; } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-error { color: var(--rs-red); font-size: 14px; } /* ═══════════════════════════════════════════════════════════════════════ 11. TOAST — HUD oscuro, estilo sistema El JS los crea con estilo inline (rs-dashboard.js → showToast / showOrderToast) y les agrega la clase .rs-toast: los !important le ganan a ese inline. ═══════════════════════════════════════════════════════════════════════ */ .rs-panel-page .rs-toast { background: rgba(29, 29, 31, .92) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: #fff !important; padding: 12px 18px !important; border-radius: var(--rs-r-md, 14px) !important; box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(255, 255, 255, .08) inset !important; font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important; font-size: 14px; font-weight: 500 !important; letter-spacing: -0.01em; transition: transform 400ms cubic-bezier(.16, 1, .3, 1), opacity 300ms linear !important; } .rs-panel-page .rs-toast i { font-size: 16px !important; } .rs-panel-page .rs-toast--success i, .rs-panel-page .rs-toast--order i { color: #30d158; } .rs-panel-page .rs-toast--error i { color: #ff453a; } /* ═══════════════════════════════════════════════════════════════════════ 12. SKELETON Y ESTADOS DE CARGA ═══════════════════════════════════════════════════════════════════════ */ :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-skeleton { display: block; min-height: 12px; border-radius: var(--rs-r-xs); background: linear-gradient(90deg, var(--rs-gray-100) 0%, var(--rs-gray-200) 40%, var(--rs-gray-100) 80%); background-size: 200% 100%; animation: rsDsShimmer 1.4s var(--rs-ease-in-out) infinite; } @keyframes rsDsShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay) .rs-loading { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 48px 16px; color: var(--rs-gray-500); font-size: 14px; } /* ═══════════════════════════════════════════════════════════════════════ 13. MOVIMIENTO REDUCIDO ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) *, :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) *::before, :where(.rs-dashboard, .rs-panel-page .rs-modal-overlay, .rs-marketing) *::after, .rs-panel-page .rs-toast { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }