@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

/*
 * Design tokens de Suyu: los valores reales llegan como CSS variables
 * inyectadas server-side desde la BD (partials/theme-vars.blade.php).
 * Aquí solo se mapean a utilidades Tailwind (bg-primary, text-ink, rounded-md...).
 * Los fallbacks son el tema azul-default por si la BD no respondió.
 */
@theme inline {
    --font-sans: var(--suyu-font-family, 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif);

    --color-primary: var(--suyu-color-primary, #2d5bff);
    --color-primary-pressed: var(--suyu-color-primary-pressed, #1f41d6);
    --color-primary-on-dark: var(--suyu-color-primary-on-dark, #7a90ff);
    --color-tint: var(--suyu-color-tint, #e8edff);
    --color-surface-dark: var(--suyu-color-surface-dark, #0d1230);
    --color-accent: var(--suyu-color-accent, #ff6b4d);
    --color-clay: var(--suyu-color-clay, #be7156);
    --color-sand: var(--suyu-color-sand, #f5efe8);
    --color-success: var(--suyu-color-success, #0e9f6e);
    --color-success-bg: var(--suyu-color-success-bg, #e6f6ef);
    --color-warning: var(--suyu-color-warning, #e8a013);
    --color-warning-bg: var(--suyu-color-warning-bg, #fcf3e1);
    --color-error: var(--suyu-color-error, #e5484d);
    --color-error-bg: var(--suyu-color-error-bg, #fdebec);
    --color-ink: var(--suyu-color-text, #191c2b);
    --color-ink-secondary: var(--suyu-color-text-secondary, #5c6172);
    --color-line: var(--suyu-color-border, #e4e6ee);
    --color-canvas: var(--suyu-color-background, #fafafc);

    --radius-sm: var(--suyu-radius-sm, 8px);
    --radius-md: var(--suyu-radius-md, 12px);
    --radius-lg: var(--suyu-radius-lg, 14px);
    --radius-pill: var(--suyu-radius-pill, 999px);
}

/*
 * Clases portadas de layouts/web.blade.php: la zona autenticada (Inertia)
 * reusa exactamente el mismo lenguaje visual que el sitio público Blade.
 */
* { margin: 0; box-sizing: border-box; }
body { font-family: var(--suyu-font-family, 'Plus Jakarta Sans', system-ui, sans-serif); background: var(--suyu-color-background); color: var(--suyu-color-text); font-size: var(--suyu-type-body-size); line-height: var(--suyu-type-body-leading); }
a { color: inherit; text-decoration: none; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
header.site { background: var(--suyu-color-background); border-bottom: 1px solid var(--suyu-color-border); position: sticky; top: 0; z-index: 10; }
header.site .container { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.03em; }
.nav a { margin-left: 18px; font-weight: 600; font-size: 14px; color: var(--suyu-color-text-secondary); }
.nav a.cta { color: var(--suyu-color-primary); }
.btn { display: inline-block; background: var(--suyu-color-primary); color: #fff; font-weight: 700; padding: 11px 22px; border-radius: var(--suyu-radius-md); border: none; cursor: pointer; font-size: 15px; font-family: inherit; }
.btn:hover { background: var(--suyu-color-primary-pressed); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--suyu-color-primary); border: 1px solid var(--suyu-color-border); }
.badge-validated { display: inline-flex; align-items: center; gap: 4px; background: var(--suyu-color-success-bg); color: var(--suyu-color-success); font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: var(--suyu-radius-pill); }
.card { background: var(--suyu-color-background); border: 1px solid var(--suyu-color-border); border-radius: var(--suyu-radius-lg); overflow: hidden; transition: box-shadow .15s; }
.card:hover { box-shadow: 0 4px 16px rgba(13,18,48,.10); }
.card .thumb { height: 170px; background: var(--suyu-color-tint); background-size: cover; background-position: center; }
.card .body { padding: 12px 14px 14px; }
.card .price { font-weight: 800; font-size: 19px; color: var(--suyu-color-primary); }
.card .title { font-weight: 700; font-size: 15px; margin-top: 2px; }
.card .meta { color: var(--suyu-color-text-secondary); font-size: 13px; margin-top: 3px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.label { font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--suyu-color-text-secondary); }
input, select { font-family: inherit; font-size: 14px; color: var(--suyu-color-text); background: var(--suyu-color-background); border: 1px solid var(--suyu-color-border); border-radius: var(--suyu-radius-sm); padding: 9px 11px; width: 100%; }
.field-error { color: var(--suyu-color-error); font-size: 13px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--suyu-radius-pill); border: 1px solid var(--suyu-color-border); font-size: 13px; font-weight: 600; cursor: pointer; margin: 0 8px 8px 0; background: var(--suyu-color-background); }
.chip.active { background: var(--suyu-color-tint); border-color: var(--suyu-color-primary); color: var(--suyu-color-primary); }
.step { padding: 24px 0; border-bottom: 1px solid var(--suyu-color-border); }
footer.site { border-top: 1px solid var(--suyu-color-border); margin-top: 56px; padding: 28px 0; color: var(--suyu-color-text-secondary); font-size: 13px; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr !important; } }