/*
 * ═══════════════════════════════════════════════════════════════
 *  AMD 3D Cotizador — Design System
 *  CSS Custom Properties + Base Element Resets
 *
 *  Rule: No utility classes. Modules scope their own classes
 *  prefixed with their module name (e.g. .amd3d-hero__title).
 *  This file only provides tokens and element-level resets
 *  inside the plugin's root scope.
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── Design Tokens ──────────────────────────────────────────── */
:root {

    /* ── Brand Colors ── */
    --amd3d-primary:          #5a53a0;
    --amd3d-primary-hover:    #4a4390;
    --amd3d-primary-light:    #EEEDF5;
    --amd3d-primary-ultra:    #F7F6FA;
    --amd3d-secondary:        #13C296;
    --amd3d-secondary-hover:  #0FAE84;
    --amd3d-secondary-light:  #E6FAF5;
    --amd3d-accent:           #F97316;
    --amd3d-accent-light:     #FFF3E8;

    /* ── Semantic Colors ── */
    --amd3d-danger:           #EF4444;
    --amd3d-danger-light:     #FEF2F2;
    --amd3d-warning:          #F59E0B;
    --amd3d-warning-light:    #FFFBEB;
    --amd3d-success:          #10B981;
    --amd3d-success-light:    #ECFDF5;
    --amd3d-info:             #3B82F6;
    --amd3d-info-light:       #EFF6FF;

    /* ── Neutrals ── */
    --amd3d-white:            #FFFFFF;
    --amd3d-gray-50:          #F8FAFC;
    --amd3d-gray-100:         #F1F5F9;
    --amd3d-gray-200:         #E2E8F0;
    --amd3d-gray-300:         #CBD5E1;
    --amd3d-gray-400:         #94A3B8;
    --amd3d-gray-500:         #64748B;
    --amd3d-gray-600:         #475569;
    --amd3d-gray-700:         #334155;
    --amd3d-gray-800:         #1E293B;
    --amd3d-gray-900:         #0F172A;
    --amd3d-black:            #020617;

    /* ── Typography ── */
    --amd3d-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --amd3d-font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --amd3d-text-xs:    0.75rem;    /* 12px */
    --amd3d-text-sm:    0.875rem;   /* 14px */
    --amd3d-text-base:  1rem;       /* 16px */
    --amd3d-text-lg:    1.125rem;   /* 18px */
    --amd3d-text-xl:    1.25rem;    /* 20px */
    --amd3d-text-2xl:   1.5rem;     /* 24px */
    --amd3d-text-3xl:   1.875rem;   /* 30px */
    --amd3d-text-4xl:   2.25rem;    /* 36px */
    --amd3d-text-5xl:   3rem;       /* 48px */

    --amd3d-leading-tight:   1.25;
    --amd3d-leading-snug:    1.375;
    --amd3d-leading-normal:  1.5;
    --amd3d-leading-relaxed: 1.625;

    --amd3d-weight-normal:   400;
    --amd3d-weight-medium:   500;
    --amd3d-weight-semibold: 600;
    --amd3d-weight-bold:     700;
    --amd3d-weight-black:    900;

    /* ── Spacing (4px scale) ── */
    --amd3d-sp-1:  4px;
    --amd3d-sp-2:  8px;
    --amd3d-sp-3:  12px;
    --amd3d-sp-4:  16px;
    --amd3d-sp-5:  20px;
    --amd3d-sp-6:  24px;
    --amd3d-sp-8:  32px;
    --amd3d-sp-10: 40px;
    --amd3d-sp-12: 48px;
    --amd3d-sp-16: 64px;
    --amd3d-sp-20: 80px;

    /* ── Border Radius ── */
    --amd3d-radius-xs:   4px;
    --amd3d-radius-sm:   6px;
    --amd3d-radius-md:   10px;
    --amd3d-radius-lg:   14px;
    --amd3d-radius-xl:   20px;
    --amd3d-radius-2xl:  28px;
    --amd3d-radius-full: 9999px;

    /* ── Shadows ── */
    --amd3d-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
    --amd3d-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --amd3d-shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --amd3d-shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --amd3d-shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    --amd3d-shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --amd3d-shadow-card:  0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
    --amd3d-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --amd3d-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    --amd3d-shadow-glow:  0 0 20px rgba(90, 83, 160, 0.15);

    /* ── Transitions ── */
    --amd3d-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --amd3d-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --amd3d-t-fast:      150ms var(--amd3d-ease-out);
    --amd3d-t-normal:    250ms var(--amd3d-ease-out);
    --amd3d-t-slow:      400ms var(--amd3d-ease-in-out);

    /* ── Z-Index Scale ── */
    --amd3d-z-base:      1;
    --amd3d-z-dropdown:  100;
    --amd3d-z-sticky:    200;
    --amd3d-z-overlay:   300;
    --amd3d-z-modal:     400;
    --amd3d-z-toast:     500;
    --amd3d-z-tooltip:   600;

    /* ── Layout ── */
    --amd3d-container-max:     1280px;
    --amd3d-container-padding: 20px;
    --amd3d-grid-gap:          24px;
}

/* ─── Google Font Import ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

/* ─── Scoped Reset ───────────────────────────────────────────── */
/* Only resets elements inside plugin containers */

[class*="amd3d-"] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[class*="amd3d-"] *,
[class*="amd3d-"] *::before,
[class*="amd3d-"] *::after {
    box-sizing: border-box;
}

/* ─── Base Typography ────────────────────────────────────────── */
[class*="amd3d-"] {
    font-family: var(--amd3d-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--amd3d-gray-800);
    line-height: var(--amd3d-leading-normal);
}

/* ─── Container ──────────────────────────────────────────────── */
.amd3d-container {
    width: 100%;
    max-width: var(--amd3d-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--amd3d-container-padding);
    padding-right: var(--amd3d-container-padding);
}

/* ─── Shared Button Primitives ───────────────────────────────── */
.amd3d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--amd3d-sp-2);
    font-family: var(--amd3d-font-sans);
    font-weight: var(--amd3d-weight-semibold);
    font-size: var(--amd3d-text-sm);
    line-height: 1;
    padding: var(--amd3d-sp-3) var(--amd3d-sp-5);
    border-radius: var(--amd3d-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--amd3d-t-fast);
    text-decoration: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.amd3d-btn:focus-visible {
    outline: 2px solid var(--amd3d-primary);
    outline-offset: 2px;
}

.amd3d-btn--primary {
    background: var(--amd3d-primary);
    color: var(--amd3d-white);
}
.amd3d-btn--primary:hover {
    background: var(--amd3d-primary-hover);
    box-shadow: var(--amd3d-shadow-md);
}

.amd3d-btn--secondary {
    background: var(--amd3d-white);
    color: var(--amd3d-gray-700);
    border-color: var(--amd3d-gray-200);
}
.amd3d-btn--secondary:hover {
    background: var(--amd3d-gray-50);
    border-color: var(--amd3d-gray-300);
}

.amd3d-btn--success {
    background: var(--amd3d-success);
    color: var(--amd3d-white);
}
.amd3d-btn--success:hover {
    background: var(--amd3d-secondary-hover);
    box-shadow: var(--amd3d-shadow-md);
}

.amd3d-btn--danger {
    background: var(--amd3d-danger);
    color: var(--amd3d-white);
}
.amd3d-btn--danger:hover {
    background: #DC2626;
    box-shadow: var(--amd3d-shadow-md);
}

.amd3d-btn--ghost {
    background: transparent;
    color: var(--amd3d-gray-600);
}
.amd3d-btn--ghost:hover {
    background: var(--amd3d-gray-100);
    color: var(--amd3d-gray-800);
}

.amd3d-btn--sm {
    font-size: var(--amd3d-text-xs);
    padding: var(--amd3d-sp-2) var(--amd3d-sp-3);
    border-radius: var(--amd3d-radius-sm);
}

.amd3d-btn--lg {
    font-size: var(--amd3d-text-base);
    padding: var(--amd3d-sp-4) var(--amd3d-sp-8);
    border-radius: var(--amd3d-radius-lg);
}

.amd3d-btn:disabled,
.amd3d-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── Shared Input Primitives ────────────────────────────────── */
.amd3d-input {
    display: block;
    width: 100%;
    font-family: var(--amd3d-font-sans);
    font-size: var(--amd3d-text-sm);
    font-weight: var(--amd3d-weight-normal);
    color: var(--amd3d-gray-800);
    background: var(--amd3d-white);
    border: 1px solid var(--amd3d-gray-200);
    border-radius: var(--amd3d-radius-md);
    padding: var(--amd3d-sp-3) var(--amd3d-sp-4);
    transition: border-color var(--amd3d-t-fast), box-shadow var(--amd3d-t-fast);
    outline: none;
}
.amd3d-input::placeholder {
    color: var(--amd3d-gray-400);
}
.amd3d-input:hover {
    border-color: var(--amd3d-gray-300);
}
.amd3d-input:focus {
    border-color: var(--amd3d-primary);
    box-shadow: 0 0 0 3px var(--amd3d-primary-light);
}
.amd3d-input--error {
    border-color: var(--amd3d-danger);
}
.amd3d-input--error:focus {
    box-shadow: 0 0 0 3px var(--amd3d-danger-light);
}

.amd3d-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.amd3d-label {
    display: block;
    font-size: var(--amd3d-text-sm);
    font-weight: var(--amd3d-weight-medium);
    color: var(--amd3d-gray-700);
    margin-bottom: var(--amd3d-sp-1);
}

.amd3d-help {
    font-size: var(--amd3d-text-xs);
    color: var(--amd3d-gray-400);
    margin-top: var(--amd3d-sp-1);
}

/* ─── Shared Card Primitive ──────────────────────────────────── */
.amd3d-card {
    background: var(--amd3d-white);
    border-radius: var(--amd3d-radius-lg);
    box-shadow: var(--amd3d-shadow-card);
    overflow: hidden;
    transition: box-shadow var(--amd3d-t-normal), transform var(--amd3d-t-normal);
}
.amd3d-card:hover {
    box-shadow: var(--amd3d-shadow-card-hover);
    transform: translateY(-2px);
}

/* ─── Badge Primitive ────────────────────────────────────────── */
.amd3d-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--amd3d-text-xs);
    font-weight: var(--amd3d-weight-semibold);
    padding: 3px 10px;
    border-radius: var(--amd3d-radius-full);
    line-height: 1.4;
}
.amd3d-badge--primary {
    background: var(--amd3d-primary-light);
    color: var(--amd3d-primary);
}
.amd3d-badge--success {
    background: var(--amd3d-success-light);
    color: var(--amd3d-success);
}
.amd3d-badge--warning {
    background: var(--amd3d-warning-light);
    color: var(--amd3d-warning);
}
.amd3d-badge--danger {
    background: var(--amd3d-danger-light);
    color: var(--amd3d-danger);
}
.amd3d-badge--info {
    background: var(--amd3d-info-light);
    color: var(--amd3d-info);
}

/* ─── Toast Notification ─────────────────────────────────────── */
.amd3d-toast-container {
    position: fixed;
    top: var(--amd3d-sp-6);
    right: var(--amd3d-sp-6);
    z-index: var(--amd3d-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--amd3d-sp-3);
    pointer-events: none;
}

.amd3d-toast {
    display: flex;
    align-items: center;
    gap: var(--amd3d-sp-3);
    background: var(--amd3d-white);
    border-radius: var(--amd3d-radius-md);
    box-shadow: var(--amd3d-shadow-xl);
    padding: var(--amd3d-sp-4) var(--amd3d-sp-5);
    font-size: var(--amd3d-text-sm);
    pointer-events: auto;
    animation: amd3d-slideIn 0.3s var(--amd3d-ease-out);
    min-width: 280px;
    max-width: 420px;
    border-left: 4px solid var(--amd3d-primary);
}
.amd3d-toast--success { border-left-color: var(--amd3d-success); }
.amd3d-toast--error   { border-left-color: var(--amd3d-danger); }
.amd3d-toast--warning { border-left-color: var(--amd3d-warning); }

.amd3d-toast.amd3d-toast--out {
    animation: amd3d-slideOut 0.25s var(--amd3d-ease-out) forwards;
}

@keyframes amd3d-slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes amd3d-slideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* ─── Loading Spinner ────────────────────────────────────────── */
.amd3d-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--amd3d-gray-200);
    border-top-color: var(--amd3d-primary);
    border-radius: 50%;
    animation: amd3d-spin 0.7s linear infinite;
}
.amd3d-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.amd3d-spinner--lg { width: 40px; height: 40px; border-width: 4px; }

@keyframes amd3d-spin {
    to { transform: rotate(360deg); }
}

/* ─── Empty State ────────────────────────────────────────────── */
.amd3d-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--amd3d-sp-16) var(--amd3d-sp-8);
    text-align: center;
}
.amd3d-empty__icon {
    font-size: 48px;
    margin-bottom: var(--amd3d-sp-4);
    opacity: 0.4;
}
.amd3d-empty__title {
    font-size: var(--amd3d-text-lg);
    font-weight: var(--amd3d-weight-semibold);
    color: var(--amd3d-gray-600);
    margin-bottom: var(--amd3d-sp-2);
}
.amd3d-empty__text {
    font-size: var(--amd3d-text-sm);
    color: var(--amd3d-gray-400);
    max-width: 360px;
}

/* ─── Modal ──────────────────────────────────────────────────── */
.amd3d-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--amd3d-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--amd3d-sp-6);
    animation: amd3d-fadeIn 0.2s ease;
}
.amd3d-modal {
    background: var(--amd3d-white);
    border-radius: var(--amd3d-radius-xl);
    box-shadow: var(--amd3d-shadow-2xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    animation: amd3d-scaleIn 0.25s var(--amd3d-ease-out);
}
.amd3d-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--amd3d-sp-6);
    border-bottom: 1px solid var(--amd3d-gray-100);
}
.amd3d-modal__title {
    font-size: var(--amd3d-text-lg);
    font-weight: var(--amd3d-weight-bold);
    color: var(--amd3d-gray-900);
}
.amd3d-modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--amd3d-gray-400);
    border-radius: var(--amd3d-radius-sm);
    cursor: pointer;
    font-size: 20px;
    transition: all var(--amd3d-t-fast);
}
.amd3d-modal__close:hover {
    background: var(--amd3d-gray-100);
    color: var(--amd3d-gray-700);
}
.amd3d-modal__body {
    padding: var(--amd3d-sp-6);
}
.amd3d-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--amd3d-sp-3);
    padding: var(--amd3d-sp-4) var(--amd3d-sp-6);
    border-top: 1px solid var(--amd3d-gray-100);
}

@keyframes amd3d-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes amd3d-scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ─── Table Primitive ────────────────────────────────────────── */
.amd3d-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--amd3d-gray-200);
    border-radius: var(--amd3d-radius-lg);
}
.amd3d-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--amd3d-text-sm);
}
.amd3d-table th {
    text-align: left;
    font-weight: var(--amd3d-weight-semibold);
    color: var(--amd3d-gray-600);
    background: var(--amd3d-gray-50);
    padding: var(--amd3d-sp-3) var(--amd3d-sp-4);
    border-bottom: 1px solid var(--amd3d-gray-200);
    white-space: nowrap;
}
.amd3d-table td {
    padding: var(--amd3d-sp-3) var(--amd3d-sp-4);
    border-bottom: 1px solid var(--amd3d-gray-100);
    color: var(--amd3d-gray-700);
    vertical-align: middle;
}
.amd3d-table tbody tr:last-child td {
    border-bottom: none;
}
.amd3d-table tbody tr:hover {
    background: var(--amd3d-gray-50);
}

/* ─── Responsive Breakpoints (reference) ─────────────────────── */
/* Mobile:  < 640px   */
/* Tablet:  640-1023px */
/* Desktop: >= 1024px  */
/* Wide:    >= 1280px  */