/* Sistema visual único de Pollos y Parrillas El Dorado. */
:root {
    --orange: #FF6F1F;
    --orange-hover: #E95C0D;
    --orange-dark: #C94700;
    --orange-soft: #FF9D5A;
    --gold: #F7B801;
    --gold-hover: #DFA500;
    --gold-soft: #FFF7D6;
    --cream: #FFF8F2;
    --cream-strong: #FFF1E3;
    --surface: #FFFFFF;
    --surface-warm: #FFFDF9;
    --surface-soft: #FFF6EE;
    --field: #FFF4EB;
    --text-primary: #25170F;
    --text-dark: #24160F;
    --text-secondary: #68432E;
    --text-muted: #765744;
    --text-on-orange: #FFFFFF;
    --text-on-gold: #25170F;
    --border: #EAB68A;
    --border-soft: #F0C9AA;
    --border-light: #F0CFB3;
    --success: #17683A;
    --success-soft: #EAF8F0;
    --warning: #805100;
    --warning-soft: #FFF4D6;
    --danger: #A1261A;
    --danger-hover: #801D14;
    --danger-soft: #FDE9E7;
    --info: #205A84;
    --info-soft: #EAF4FB;
    --shadow-small: 0 4px 14px rgba(37, 23, 15, .08);
    --shadow-medium: 0 12px 28px rgba(37, 23, 15, .12);
    --shadow-large: 0 20px 46px rgba(37, 23, 15, .14);
    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 20px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Alias de compatibilidad: todos resuelven a la paleta única. */
    --paper: var(--surface-warm);
    --paper-soft: var(--surface-soft);
    --ink: var(--text-primary);
    --ink-dark: var(--text-dark);
    --ink-soft: var(--text-secondary);
    --ink-muted: var(--text-muted);
    --muted-ink: var(--text-secondary);
    --line: var(--border-soft);
    --line-strong: var(--border);
    --line-light: var(--border-light);
    --shadow-soft: var(--shadow-small);
    --shadow-strong: var(--shadow-large);
    --radius-sm: var(--radius-small);
    --radius-md: var(--radius-medium);
    --radius-lg: var(--radius-large);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    min-width: 320px;
    color-scheme: light;
    scroll-behavior: smooth;
}

body,
body[data-theme="dark"] {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    background: var(--cream) !important;
    color: var(--text-primary) !important;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 15px;
    line-height: 1.5;
}

img { max-width: 100%; }
a { color: var(--orange-dark); }
a:hover { color: var(--orange-hover); }

h1,
h2,
h3,
h4,
.title,
.section-title,
.product-name,
.product-card-title,
.proof-modal-title,
.float-cart-title {
    color: var(--text-primary) !important;
    text-shadow: none;
}

.section-title {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 28px) !important;
    line-height: 1.15;
    font-weight: 800;
}

.muted,
.muted-main,
.section-copy,
.section-subtitle,
.helper-text,
.field-help,
.lead,
.title-sub,
.brand-subtitle {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}

.eyebrow,
.brand-kicker,
.head-kicker,
.label,
.label-main {
    color: var(--orange-dark) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
}

.store-shell,
.auth-shell,
.login-shell,
.admin-shell,
.dashboard-shell {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--cream) !important;
}

.container,
.store-frame,
.page-container,
.page-content,
.admin-shell,
.dashboard-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.store-frame,
.auth-shell,
.login-shell,
.admin-shell,
.dashboard-shell {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.topbar,
.store-header,
header {
    position: sticky !important;
    top: 0;
    z-index: 1100 !important;
    width: 100% !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-soft) !important;
    border-radius: 0 !important;
    background: rgba(255, 248, 242, .96) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 16px rgba(37, 23, 15, .07) !important;
    backdrop-filter: blur(12px);
}

.topbar-inner,
main.page,
.page-container,
.admin-content,
.dashboard-content {
    width: 100% !important;
    max-width: none !important;
    padding-inline: clamp(14px, 3vw, 44px) !important;
}

.topbar-inner {
    display: grid !important;
    grid-template-columns: minmax(300px, .9fr) minmax(480px, 1.1fr) !important;
    gap: 18px !important;
    align-items: center;
    padding-block: 14px;
}

main.page { padding-block: clamp(16px, 2.4vw, 32px) !important; }

.brand-title,
header .title {
    color: var(--text-primary) !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.05;
}

.surface,
.panel,
.card,
.metric-card,
.chart-card,
.module-summary,
.table-shell,
.product-card,
.tool-card,
.catalog-tools,
.login-card,
.field-card,
.payment-brief,
.proof-panel,
.pay-tile {
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-medium) !important;
    background: var(--surface-warm) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-small) !important;
}

.panel,
.card,
.metric-card,
.chart-card,
.module-summary,
.field-card { padding: clamp(14px, 2vw, 22px); }

button,
.btn-main,
.btn-soft,
.pill-btn,
.pill-link,
.primary-link,
.menu-tab,
.store-nav a {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--radius-pill) !important;
    font: inherit;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.btn-main,
.primary-link,
button[type="submit"],
.store-nav a.active,
.menu-tab.active {
    border: 1px solid var(--orange) !important;
    background: var(--orange) !important;
    color: var(--text-on-orange) !important;
    box-shadow: var(--shadow-small) !important;
}

.btn-main:hover,
.primary-link:hover,
button[type="submit"]:hover,
.store-nav a.active:hover,
.menu-tab.active:hover { background: var(--orange-hover) !important; }

.btn-main:active,
.primary-link:active,
button[type="submit"]:active { background: var(--orange-dark) !important; transform: translateY(1px); }

.btn-soft,
.pill-btn,
.pill-link,
.user-pill,
.store-nav a:not(.active),
.menu-tab:not(.active),
button:not([type="submit"]):not(.btn-main):not(.danger-btn):not(.hero-control):not(.hero-indicator) {
    border: 1px solid var(--border) !important;
    background: var(--surface-warm) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}

.btn-soft:hover,
.pill-btn:hover,
.pill-link:hover,
.store-nav a:not(.active):hover { background: var(--cream-strong) !important; }

.danger-btn,
button.danger {
    border-color: var(--danger) !important;
    background: var(--danger) !important;
    color: #fff !important;
}

button:disabled,
.btn-main:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed !important;
    opacity: .62 !important;
}

input,
select,
textarea,
.input-main,
.select-main,
.textarea-main {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-medium) !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    font: inherit;
    font-size: 14px;
    padding: 11px 14px !important;
}

input::placeholder,
textarea::placeholder { color: var(--text-muted) !important; opacity: 1; }

input:focus,
select:focus,
textarea:focus,
.input-main:focus,
.select-main:focus,
.textarea-main:focus {
    outline: 0;
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 4px rgba(255, 111, 31, .16) !important;
}

:focus-visible {
    outline: 3px solid rgba(255, 111, 31, .38) !important;
    outline-offset: 3px !important;
}

.store-nav,
.admin-menu {
    display: flex;
    gap: 9px;
    align-items: center;
}

.products-grid,
.product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    width: 100%;
}

.product-image-wrap { overflow: hidden; border-radius: var(--radius-medium) !important; }
.product-image { width: 100%; height: 100%; object-fit: cover; }
.product-price { color: var(--orange-dark) !important; }

.dashboard-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr) !important;
    gap: 16px !important;
}

.dashboard-charts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.dashboard-bottom {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.table-shell,
.table-responsive { max-width: 100%; overflow-x: auto !important; }

.status-badge,
.status-chip,
.tag {
    color: var(--text-secondary) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border-soft) !important;
}

.success { color: var(--success) !important; background: var(--success-soft) !important; }
.warning { color: var(--warning) !important; background: var(--warning-soft) !important; }
.danger { color: var(--danger) !important; background: var(--danger-soft) !important; }
.info { color: var(--info) !important; background: var(--info-soft) !important; }

@media (min-width: 1440px) {
    .products-grid,
    .product-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
}

@media (max-width: 1199px) {
    .topbar-inner { grid-template-columns: 1fr !important; }
    .store-nav { overflow-x: auto; padding-bottom: 4px; }
    .store-nav a { flex: 0 0 auto; }
}

@media (max-width: 991px) {
    .dashboard-summary,
    .dashboard-charts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dashboard-charts > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .topbar-inner,
    main.page,
    .page-container,
    .admin-content,
    .dashboard-content { padding-inline: 14px !important; }
    .dashboard-summary,
    .dashboard-charts,
    .dashboard-bottom { grid-template-columns: minmax(0, 1fr) !important; }
    .dashboard-charts > :last-child { grid-column: auto; }
    .products-grid,
    .product-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
}

@media (max-width: 479px) {
    .brand-title,
    header .title { font-size: 24px !important; }
    .products-grid,
    .product-grid { grid-template-columns: minmax(0, 1fr) !important; }
    button,
    .btn-main,
    .btn-soft { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}