/* Tienda Pesca — brands.css (design tokens) Uso: incluir DESPUÉS de Tailwind CDN/build para que los tokens estén disponibles. Ruta sugerida: public_html/assets/css/brands.css */ /* ========== Tokens base (modo oscuro por defecto) ========== */ :root { /* Colores de marca */ --brand: #016d6e; /* principal */ --brand-600: #015a5b; /* hover/active */ --accent: #00c1d5; /* acento / highlights */ --brand-yellow: #ffc300; /* NUEVO: acento secundario */ /* Neutros */ --bg: #0f1214; /* fondo global oscuro */ --bg-soft: #e8fffe; /* superficies */ --fg: #0f1416; /* texto principal */ --muted: #a8b3b6; /* texto secundario */ --fg-muted: var(--muted); /* alias: compatibilidad */ --border: #223036; /* bordes sutiles */ /* Estados */ --success: #2fb67b; --warning: #ffb020; --danger: #e5484d; /* Tipografía */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Dimensiones & radios */ --radius-xs: 6px; --radius: 12px; --radius-lg: 16px; /* Sombra */ --shadow-soft: 0 8px 24px rgba(0,0,0,.18); /* Transiciones */ --ease: cubic-bezier(.2,.8,.2,1); --speed: 180ms; } /* ========== Modo claro opcional ========== */ /* Si algún día usamos modo claro, podemos activar con data-theme="light" en */ :root[data-theme="light"] { --bg: #f7fbfc; --bg-soft: #ffffff; --fg: #0f1416; --muted: #5c6b70; --fg-muted: var(--muted); --border: #dde7ea; } /* ========== Aplicación global mínima ========== */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } hr { border-color: var(--border); } /* ========== Helpers de marca (optativo) ========== */ .text-brand { color: var(--brand); } .bg-brand { background-color: var(--brand); } .border-brand { border-color: var(--brand); } .text-brand-yellow { color: var(--brand-yellow); } /* NUEVO */ .bg-brand-yellow { background-color: var(--brand-yellow); } /* NUEVO */ .border-brand-yellow { border-color: var(--brand-yellow); } /* NUEVO */ .btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1rem; border-radius: var(--radius); background: var(--brand); color: #fff; box-shadow: var(--shadow-soft); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease); } .btn-brand:hover { background: var(--brand-600); transform: translateY(-1px); } .btn-brand:active{ transform: translateY(0); } .badge-accent { display: inline-block; padding: .25rem .5rem; border-radius: var(--radius-xs); background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent); } /* Tarjetas base para grids de productos — FIX contraste */ .card { background: var(--bg-soft); /* antes: var(--fg) */ color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset; } /* Inputs consistentes — FIX contraste */ .input, input[type="text"], input[type="search"], input[type="email"], input[type="number"], select, textarea { background: var(--bg-soft); /* antes: var(--fg) */ color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: .5rem .75rem; outline: none; } .input::placeholder, input::placeholder, textarea::placeholder { color: var(--muted); } .input:focus, input[type="text"]:focus, input[type="search"]:focus, select:focus, textarea:focus { border-color: color-mix(in oklab, var(--brand) 60%, var(--border)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 24%, transparent); } /* Estado de error (UX forms) */ .input-error { border-color: color-mix(in oklab, var(--danger) 75%, var(--border)) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent) !important; } /* Links */ a { color: var(--accent); } a:hover { text-decoration: underline; } /* Utilidad para contenedores máximos */ .container-narrow { max-width: 1100px; margin-inline: auto; padding-inline: 1rem; } /* ========== Fin brands.css ========== */ /* === Admin surfaces / tokens (dashboard) === */ :root{ --surface-0: color-mix(in srgb, var(--brand-900, #003c3d) 6%, #0b1215); --surface-1: color-mix(in srgb, var(--brand-800, #015a5c) 12%, #0b1215); --surface-2: color-mix(in srgb, var(--brand-700, #016d6e) 18%, #0b1215); --line-soft: color-mix(in srgb, var(--brand-600, #148f91) 25%, #d1d5db); } .admin-surface { background: var(--surface-0); } .admin-card { background: var(--surface-1); border:1px solid var(--line-soft); border-radius:.8rem; padding:1rem; } .link { color: var(--brand-600, #148f91); } .link:hover { color: var(--brand-500, #23a6a8); } .btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:.6rem;background:var(--surface-2);border:1px solid var(--line-soft);color:#fff;} /* ===== Admin Theme (Light) ===== */ :root{ /* Base brand already defined; extend admin tokens */ --admin-bg: #f7faf9; /* canvas */ --admin-card-bg: #ffffff; /* cards */ --admin-text: #0f172a; /* strong text */ --muted: #667085; /* override softer text used in admin */ --line-soft: #e6eff0; /* soft borders */ --tab-idle: #344054; --tab-idle-bg: #ffffff; } .admin-surface { background: var(--admin-bg); padding: 1rem; } @media (min-width: 768px){ .admin-surface { padding: 1.25rem; } } .admin-wrap { max-width: 1200px; margin: 0 auto; } .admin-card{ background: var(--admin-card-bg); color: var(--admin-text); border: 1px solid var(--line-soft); border-radius: 14px; padding: 1rem; box-shadow: 0 2px 6px rgba(2, 54, 56, .04); } .link { color: var(--brand-600, #148f91); } .link:hover { color: var(--brand-500, #23a6a8); } .btn-secondary{ display:inline-flex;align-items:center;gap:.5rem; padding:.55rem .9rem;border-radius:.6rem; background:#f5fbfb;border:1px solid var(--line-soft);color:#0f172a; } /* Subnav (tabs) */ .nav-admin{ background: var(--admin-card-bg); border: 1px solid var(--line-soft); border-radius: 12px; padding: .5rem; display:flex; flex-wrap:wrap; gap:.25rem .35rem; box-shadow: 0 2px 6px rgba(2, 54, 56, .04); } .nav-admin a{ padding:.45rem .8rem; border-radius: 10px; color: var(--tab-idle); background: var(--tab-idle-bg); transition: all .15s ease; } .nav-admin a:hover{ background:#f0faf9; color:#073c3d; } .nav-admin a.active{ background: var(--brand-600, #148f91); color:#fff; box-shadow: 0 1px 4px rgba(1, 70, 72, .25); } /* Chart helpers */ .chart-tooltip{ position: absolute; pointer-events:none; background:#0b1720; color:#fff; border-radius:8px; padding:.4rem .55rem; font-size:.8rem; box-shadow: 0 4px 10px rgba(2,54,56,.25); z-index:50; } .chart-tooltip.hidden{ display:none; } /* Badges */ .badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;padding:.25rem .5rem;border-radius:999px;border:1px solid var(--line-soft);} .badge--ok{ background:#eefcf7; color:#065f46; border-color:#ccf2e6; } .badge--warn{ background:#fff7ed; color:#9a3412; border-color:#fde68a; } .badge--err{ background:#fef2f2; color:#991b1b; border-color:#fecaca; } /* KPI card headers */ .kpi .kpi-h{font-size:.75rem; color:var(--muted); letter-spacing:.02em; text-transform:uppercase;} .kpi .kpi-v{font-size:2rem; font-weight:700; color:var(--admin-text);} /* Admin tables */ .admin-table { background: var(--admin-card-bg); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; } .admin-table table { width:100%; border-collapse: collapse; } .admin-table thead th{ background:#f7fbfb; color:#0f172a; font-weight:600; font-size:.9rem; padding:.7rem .8rem; border-bottom:1px solid var(--line-soft); } .admin-table tbody td{ padding:.65rem .8rem; border-top:1px solid var(--line-soft); color:#0f172a; } .admin-table tr:hover td{ background:#fafdfd; } .btn { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .85rem; border-radius:10px; border:1px solid var(--line-soft); background:#fff; color:#0f172a; } .btn:hover { background:#f7fbfb; } .btn-primary{ background: var(--brand-600,#148f91); color:#fff; border-color: transparent; } .btn-primary:hover{ background: var(--brand-500,#23a6a8); } .badge-soft{ background:#eef6f6; color:#0f172a; border:1px solid var(--line-soft); padding:.15rem .5rem; border-radius:999px; font-size:.75rem; } /* ---- Toasts (fallback sin depender de utilidades Tailwind en runtime) ---- */ #toast-root{ position:fixed; top:1rem; right:1rem; z-index:9999; width:min(92vw,22rem); display:flex; flex-direction:column; gap:.75rem; pointer-events:none; user-select:none; } #toast-root{ /* Evita que el toast quede “imperceptible” */ filter: drop-shadow(0 10px 18px rgba(0,0,0,.12)); } #toast-root .toast{ pointer-events:auto; border-radius:16px; border:1px solid rgba(0,0,0,.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 10px 20px rgba(0,0,0,.12); overflow:hidden; } /* Mobile: snackbar abajo (más visible y no tapa header) */ @media (max-width: 640px){ #toast-root{ top:auto; right:auto; left:50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(94vw, 28rem); gap: .6rem; } #toast-root .toast{ border-radius: 14px; } } #toast-root .toast-close{ cursor:pointer; } /* ---- Inputs con error ---- */ .input-error{ border-color: rgb(239 68 68) !important; /* red-500 */ box-shadow: 0 0 0 3px rgba(239,68,68,.20) !important; }