/* ═══════════════════════════════════════════
   LA POINT — Tienda de tecnología
   Paleta: negro, blanco, gris, rojo acento
═══════════════════════════════════════════ */

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

:root {
    --black:   #0a0a0a;
    --dark:    #111111;
    --dark2:   #1a1a1a;
    --dark3:   #222222;
    --gray:    #333333;
    --gray2:   #555555;
    --gray3:   #888888;
    --light:   #e5e5e5;
    --lighter: #f5f5f5;
    --white:   #ffffff;
    --accent:  #e63946;
    --accent2: #c1121f;
    --success: #2a9d8f;
    --warning: #e9c46a;
    --radius:  10px;
    --shadow:  0 4px 20px rgba(0,0,0,.18);
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: var(--lighter);
    color: var(--dark);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ── HEADER ── */
.header {
    background: var(--black);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.logo {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--white);
    white-space: nowrap;
}
.logo span { color: var(--accent); }

.search-bar {
    flex: 1;
    max-width: 520px;
    display: flex;
    background: var(--dark3);
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid var(--gray);
    transition: border-color .2s;
}
.search-bar:focus-within { border-color: var(--accent); }
.search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 14px;
    color: var(--white);
    font-size: 14px;
}
.search-bar input::placeholder { color: var(--gray3); }
.search-bar button {
    background: var(--accent);
    border: none;
    padding: 10px 16px;
    color: var(--white);
    font-size: 15px;
    transition: background .2s;
}
.search-bar button:hover { background: var(--accent2); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.btn-cart {
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .2s, transform .1s;
    position: relative;
}
.btn-cart:hover { background: var(--accent2); transform: scale(1.03); }
.cart-count {
    background: var(--white);
    color: var(--accent);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-admin-link {
    color: var(--gray3);
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color .2s;
}
.btn-admin-link:hover { color: var(--white); }

/* Botones de usuario en header */
.btn-nav-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--gray3);
    font-size: 18px;
    padding: 4px 10px;
    border-radius: 7px;
    transition: color .2s;
}
.btn-nav-icon:hover { color: var(--white); }
.btn-nav-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.btn-user {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    color: var(--white);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s;
    white-space: nowrap;
}
.btn-user:hover { background: rgba(255,255,255,.15); }
.user-pts { background: rgba(250,204,21,.2); color: #facc15; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.btn-login {
    background: rgba(255,255,255,.08);
    color: var(--white);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s;
    white-space: nowrap;
}
.btn-login:hover { background: var(--accent); }

/* ── NAV CATEGORÍAS ── */
.cat-nav {
    background: var(--dark);
    border-bottom: 1px solid var(--gray);
    overflow-x: auto;
    scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 4px;
}
.cat-nav a {
    color: var(--gray3);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    white-space: nowrap;
    transition: color .2s, border-bottom .2s;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cat-nav a:hover, .cat-nav a.active {
    color: var(--white);
    border-bottom-color: var(--accent);
}

/* ── HERO ── */
.hero {
    background: linear-gradient(135deg, var(--black) 0%, var(--dark2) 50%, #1a0505 100%);
    color: var(--white);
    padding: 80px 24px;
    text-align: center;
}
.hero h1 {
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 16px;
    line-height: 1.1;
}
.hero h1 span { color: var(--accent); }
.hero p {
    font-size: 18px;
    color: var(--gray3);
    max-width: 500px;
    margin: 0 auto 32px;
}
.hero-search {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(230,57,70,.3);
}
.hero-search input {
    flex: 1;
    border: none;
    outline: none;
    padding: 16px 20px;
    font-size: 16px;
    color: var(--dark);
}
.hero-search button {
    background: var(--accent);
    border: none;
    padding: 16px 28px;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    transition: background .2s;
}
.hero-search button:hover { background: var(--accent2); }

/* ── CONTENEDOR ── */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── SECCIÓN ── */
.section { padding: 48px 0; }
.section-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--dark);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--light);
    margin-left: 10px;
}
.section-title .accent { color: var(--accent); }

/* ── GRID PRODUCTOS ── */
.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* ── TARJETA PRODUCTO ── */
.prod-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    transition: transform .2s, box-shadow .2s;
    border: 1.5px solid var(--light);
    display: flex;
    flex-direction: column;
    position: relative;
}
.prod-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: #ddd;
}
.prod-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent);
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.prod-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--lighter);
    padding: 20px;
}
.prod-img-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--light);
}
.prod-info {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prod-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray3);
    letter-spacing: .7px;
}
.prod-nombre {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod-precio {
    margin-top: auto;
    padding-top: 8px;
}
.precio-actual {
    font-size: 20px;
    font-weight: 900;
    color: var(--dark);
}
.precio-anterior {
    font-size: 13px;
    color: var(--gray3);
    text-decoration: line-through;
}
.precio-descuento {
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
}
.prod-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--lighter);
    display: flex;
    gap: 8px;
}
.btn-agregar {
    flex: 1;
    background: var(--black);
    color: var(--white);
    border: none;
    border-radius: 7px;
    padding: 9px;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-agregar:hover { background: var(--accent); }
.btn-ver {
    background: var(--lighter);
    color: var(--dark);
    border: 1.5px solid var(--light);
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s;
    display: flex;
    align-items: center;
}
.btn-ver:hover { border-color: var(--gray2); }

/* ── CARRITO LATERAL ── */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 100vw);
    height: 100vh;
    background: var(--white);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 40px rgba(0,0,0,.3);
}
.cart-panel.open { transform: translateX(0); }
.cart-header {
    padding: 20px 24px;
    background: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cart-header h3 { font-size: 18px; font-weight: 800; }
.btn-close-cart {
    background: none;
    border: none;
    color: var(--white);
    font-size: 22px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .2s;
}
.btn-close-cart:hover { background: var(--gray); }
.cart-items { flex: 1; overflow-y: auto; padding: 16px; }
.cart-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lighter);
    align-items: center;
}
.cart-item-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: var(--lighter);
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
}
.cart-item-img-placeholder {
    width: 60px;
    height: 60px;
    background: var(--lighter);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--light);
    flex-shrink: 0;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-nombre {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-item-precio { font-size: 14px; font-weight: 900; color: var(--accent); margin-top: 2px; }
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1.5px solid var(--light);
    background: var(--lighter);
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-btn:hover { border-color: var(--gray2); background: var(--light); }
.qty-num { font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; }
.btn-remove {
    background: none;
    border: none;
    color: var(--gray3);
    font-size: 16px;
    padding: 4px;
    transition: color .2s;
    margin-left: auto;
}
.btn-remove:hover { color: var(--accent); }
.cart-footer {
    padding: 20px 24px;
    border-top: 2px solid var(--lighter);
    background: var(--white);
}
.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 16px;
}
.cart-total .monto { color: var(--accent); }
.btn-checkout {
    width: 100%;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: 9px;
    padding: 15px;
    font-size: 16px;
    font-weight: 800;
    transition: background .2s, transform .1s;
}
.btn-checkout:hover { background: var(--accent2); transform: scale(1.01); }
.cart-vacio {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray3);
}
.cart-vacio i { font-size: 48px; margin-bottom: 12px; display: block; }

/* ── CHECKOUT MODAL ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
    background: var(--white);
    border-radius: 14px;
    padding: 32px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(.95);
    transition: transform .3s;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.modal-overlay.open .modal-box { transform: scale(1); }
.modal-title {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.form-group input, .form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--light);
    border-radius: 8px;
    font-size: 14px;
    color: var(--dark);
    outline: none;
    transition: border-color .2s;
    font-family: inherit;
    background: var(--lighter);
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent); background: var(--white); }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.modal-footer { display: flex; gap: 10px; margin-top: 24px; }
.btn-enviar {
    flex: 1;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: 9px;
    padding: 13px;
    font-size: 15px;
    font-weight: 800;
    transition: background .2s;
}
.btn-enviar:hover { background: var(--accent2); }
.btn-cancelar {
    background: var(--lighter);
    color: var(--dark);
    border: 1.5px solid var(--light);
    border-radius: 9px;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 700;
    transition: all .2s;
}
.btn-cancelar:hover { border-color: var(--gray2); }

/* ── TOAST ── */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    background: var(--black);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideUp .3s ease;
    border-left: 4px solid var(--accent);
}
.toast.success { border-left-color: var(--success); }
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ── PRODUCTO DETALLE ── */
.prod-detalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 48px 0;
    align-items: start;
}
.prod-detalle-img {
    background: var(--white);
    border-radius: 14px;
    padding: 32px;
    border: 1.5px solid var(--light);
    text-align: center;
}
.prod-detalle-img img { max-height: 380px; margin: 0 auto; object-fit: contain; }
.prod-detalle-info { display: flex; flex-direction: column; gap: 16px; }
.prod-detalle-cat {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 1px;
}
.prod-detalle-nombre { font-size: 30px; font-weight: 900; color: var(--dark); line-height: 1.2; }
.prod-detalle-precio { font-size: 36px; font-weight: 900; color: var(--dark); }
.prod-detalle-desc { font-size: 15px; color: var(--gray2); line-height: 1.7; }
.btn-agregar-grande {
    background: var(--black);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 800;
    transition: background .2s;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}
.btn-agregar-grande:hover { background: var(--accent); }

/* ── PAGINACIÓN ── */
.pagination { display: flex; gap: 6px; justify-content: center; padding: 32px 0; }
.page-btn {
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 1.5px solid var(--light);
    background: var(--white);
    color: var(--dark);
    font-size: 14px;
    font-weight: 700;
    transition: all .2s;
    display: flex; align-items: center; justify-content: center;
}
.page-btn:hover, .page-btn.active {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

/* ── FOOTER ── */
footer {
    background: var(--black);
    color: var(--gray3);
    padding: 48px 24px 24px;
    margin-top: 60px;
}
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}
.footer-logo { font-size: 26px; font-weight: 900; color: var(--white); margin-bottom: 10px; }
.footer-logo span { color: var(--accent); }
.footer-desc { font-size: 14px; line-height: 1.7; }
.footer-title { font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--white); margin-bottom: 14px; letter-spacing: .7px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: 14px; color: var(--gray3); transition: color .2s; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom {
    border-top: 1px solid var(--gray);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .header-inner { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .search-bar { order: 3; width: 100%; max-width: 100%; }
    .hero { padding: 48px 16px; }
    .prod-detalle { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .productos-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .container { padding: 0 16px; }
}

/* ── ADMIN ── */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 240px;
    background: var(--black);
    color: var(--white);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.admin-sidebar-logo {
    padding: 24px;
    font-size: 20px;
    font-weight: 900;
    border-bottom: 1px solid var(--gray);
}
.admin-sidebar-logo span { color: var(--accent); }
.admin-nav { padding: 16px 0; flex: 1; }
.admin-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    color: var(--gray3);
    font-size: 14px;
    font-weight: 600;
    transition: all .2s;
}
.admin-nav a:hover, .admin-nav a.active {
    color: var(--white);
    background: var(--dark3);
    border-right: 3px solid var(--accent);
}
.admin-content {
    flex: 1;
    background: var(--lighter);
    overflow-y: auto;
}
.admin-topbar {
    background: var(--white);
    padding: 16px 32px;
    border-bottom: 1px solid var(--light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-topbar h1 { font-size: 20px; font-weight: 900; }
.admin-main { padding: 32px; }
.admin-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    border: 1px solid var(--light);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--gray2);
    border-bottom: 2px solid var(--light);
    letter-spacing: .5px;
}
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--lighter);
    vertical-align: middle;
}
.admin-table tr:hover td { background: var(--lighter); }
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.badge-activo { background: #dcfce7; color: #166534; }
.badge-inactivo { background: #fee2e2; color: #991b1b; }
.badge-pendiente { background: #fef3c7; color: #92400e; }
.badge-completado { background: #dcfce7; color: #166534; }
.badge-cancelado { background: #fee2e2; color: #991b1b; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 700; border: none; transition: all .2s; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { background: var(--accent); }
.btn-secondary { background: var(--lighter); color: var(--dark); border: 1.5px solid var(--light); }
.btn-secondary:hover { border-color: var(--gray2); }
.btn-danger { background: #fee2e2; color: var(--accent); border: 1.5px solid #fecaca; }
.btn-danger:hover { background: var(--accent); color: var(--white); }
.btn-success { background: #dcfce7; color: #166534; }
.stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 20px 24px;
    border: 1px solid var(--light);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stat-num { font-size: 32px; font-weight: 900; }
.stat-label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--gray3); letter-spacing: .5px; }
.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--light);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
    font-family: inherit;
    background: var(--white);
}
.form-control:focus { border-color: var(--black); }
.form-label { display: block; font-size: 12px; font-weight: 700; color: var(--gray2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; }
.alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.img-thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; border: 1px solid var(--light); background: var(--lighter); padding: 3px; }

/* ═══════════════════════════════════════════
   DARK MODE THEME
═══════════════════════════════════════════ */

/* Transición suave al cambiar tema */
body, .prod-card, .cart-panel, .modal-box,
.form-control, .chip-filtro, .page-btn, .btn-ver,
.cat-nav, .section-title { transition: background .25s, color .25s, border-color .25s; }

/* ── DARK MODE (html.dark) ── */
html.dark body {
    background: #111111;
    color: #f0f0f0;
}
html.dark .section-title { color: #f0f0f0; }
html.dark .section-title::after { background: #2a2a2a; }

html.dark .prod-card {
    background: #1a1a1a;
    border-color: #2a2a2a;
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
html.dark .prod-card:hover {
    border-color: #3a3a3a;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
html.dark .prod-img,
html.dark .prod-img-placeholder { background: #222222; }
html.dark .prod-img-placeholder { color: #333; }
html.dark .prod-nombre, html.dark .precio-actual { color: #f0f0f0; }
html.dark .prod-footer { border-color: #2a2a2a; }
html.dark .btn-ver {
    background: #222;
    border-color: #333;
    color: #ccc;
}
html.dark .btn-ver:hover { border-color: #555; }
html.dark .btn-agregar { background: #e63946; }
html.dark .btn-agregar:hover { background: #c1121f; }

html.dark .form-control {
    background: #1a1a1a;
    border-color: #333;
    color: #f0f0f0;
}
html.dark .form-control:focus { border-color: #e63946; }
html.dark select.form-control { background: #1a1a1a; color: #f0f0f0; }

html.dark .chip-filtro {
    background: #1a1a1a;
    border-color: #333;
    color: #ccc;
}
html.dark .chip-filtro:hover { border-color: #e63946; color: #e63946; }
html.dark .chip-filtro.active { background: #e63946; border-color: #e63946; color: #fff; }

html.dark .page-btn {
    background: #1a1a1a;
    border-color: #333;
    color: #ccc;
}
html.dark .page-btn:hover,
html.dark .page-btn.active { background: #e63946; border-color: #e63946; color: #fff; }

html.dark .cart-panel { background: #1a1a1a; }
html.dark .cart-item { border-color: #2a2a2a; }
html.dark .cart-item-img,
html.dark .cart-item-img-placeholder { background: #222; }
html.dark .cart-item-nombre { color: #f0f0f0; }
html.dark .cart-item-precio { color: #aaa; }
html.dark .cart-footer { background: #1a1a1a; border-color: #2a2a2a; }
html.dark .cart-total { color: #f0f0f0; }

html.dark .modal-box {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
}
html.dark .modal-title { color: #f0f0f0; }
html.dark .modal-box .form-group label { color: #aaa; }
html.dark .modal-box input,
html.dark .modal-box textarea {
    background: #111;
    border-color: #333;
    color: #f0f0f0;
}
html.dark #resumen-pedido { background: #111; color: #ccc; }
html.dark #ch-cupon { background: #111; border-color: #333; color: #f0f0f0; }
html.dark #ch-puntos-section { background: rgba(250,204,21,.05); }

/* Anuncio promo strip */
.promo-strip {
    background: #e63946;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    height: 32px;
    display: flex;
    align-items: center;
}
.promo-strip-track {
    display: flex;
    gap: 0;
    animation: scroll-promo 28s linear infinite;
    white-space: nowrap;
}
.promo-strip-track span {
    padding: 0 32px;
}
.promo-strip-track span::after {
    content: '•';
    margin-left: 32px;
    opacity: .5;
}
@keyframes scroll-promo {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
html.dark .promo-strip { background: #c1121f; }

/* Features strip */
.features-strip {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--light);
    background: var(--white);
    overflow-x: auto;
    scrollbar-width: none;
}
.features-strip::-webkit-scrollbar { display: none; }
.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    flex: 1;
    min-width: 160px;
    border-right: 1px solid var(--light);
    white-space: nowrap;
}
.feature-item:last-child { border-right: none; }
.feature-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.feature-text { font-size: 12px; line-height: 1.4; }
.feature-text strong { display: block; font-size: 13px; font-weight: 800; color: var(--dark); }
.feature-text span { color: var(--gray3); font-weight: 500; }
html.dark .features-strip {
    background: #1a1a1a;
    border-color: #2a2a2a;
}
html.dark .feature-item { border-color: #2a2a2a; }
html.dark .feature-text strong { color: #f0f0f0; }

/* Botón tema toggle */
.btn-theme-toggle {
    background: rgba(255,255,255,.08);
    border: none;
    color: #ccc;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.btn-theme-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Mejorar hover de tarjetas */
html.dark .prod-card:hover .prod-nombre { color: #fff; }
html.dark .prod-card:hover { transform: translateY(-6px); }

/* Corregir color de texto en dark en selects */
html.dark select option { background: #1a1a1a; color: #f0f0f0; }

/* ══════════════════════════════════════════
   BOTONES TOGGLE MONEDA (carrito)
══════════════════════════════════════════ */
.btn-moneda-pago {
    flex: 1;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: var(--gray3);
    transition: background .18s, color .18s;
    font-family: inherit;
}
.btn-moneda-pago.active {
    background: var(--accent);
    color: #fff;
}
.btn-moneda-pago:hover:not(.active) {
    background: var(--light);
}

/* ═══════════════════════════════════════════
   ADMIN DARK MODE
═══════════════════════════════════════════ */
html.dark .admin-content  { background: #111111; }
html.dark .admin-topbar   { background: #1a1a1a; border-color: #2a2a2a; color: #f0f0f0; }
html.dark .admin-topbar h1{ color: #f0f0f0; }
html.dark .admin-card     { background: #1a1a1a; border-color: #2a2a2a; color: #f0f0f0; }
html.dark .stat-card      { background: #1a1a1a; border-color: #2a2a2a; }
html.dark .stat-num       { color: #f0f0f0; }
html.dark .admin-table th { color: #888; border-color: #2a2a2a; }
html.dark .admin-table td { border-color: #222; color: #ddd; }
html.dark .admin-table tr:hover td { background: #222; }
html.dark .badge-activo   { background: #052e16; color: #4ade80; }
html.dark .badge-pendiente{ background: #1c1209; color: #fbbf24; }
html.dark .badge-cancelado{ background: #1c0505; color: #f87171; }
html.dark .badge-completado{ background: #052e16; color: #4ade80; }
html.dark .btn-secondary  { background: #1a1a1a; border-color: #333; color: #ccc; }

/* ═══════════════════════════════════════════
   LIGHT MODE OVERRIDES (html:not(.dark))
═══════════════════════════════════════════ */

/* ── Menú de categorías ── */
html:not(.dark) .cat-nav {
    background: #ffffff;
    border-bottom: 2px solid #e5e5e5;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
html:not(.dark) .cat-nav a {
    color: #444444;
}
html:not(.dark) .cat-nav a:hover,
html:not(.dark) .cat-nav a.active {
    color: #111111;
    border-bottom-color: #e63946;
}

/* ── Footer ── */
html:not(.dark) footer {
    background: #f0f0f0;
    color: #555555;
    border-top: 1px solid #e0e0e0;
}
html:not(.dark) .footer-logo { color: #111111; }
html:not(.dark) .footer-title { color: #111111; }
html:not(.dark) .footer-desc { color: #555555; }
html:not(.dark) .footer-links a { color: #555555; }
html:not(.dark) .footer-links a:hover { color: #e63946; }
html:not(.dark) .footer-bottom { border-color: #ddd; color: #888; }

/* ── Barra de filtros / chips ── */
html:not(.dark) .chip-filtro {
    background: #ffffff;
    border-color: #e0e0e0;
    color: #444444;
}
html:not(.dark) .chip-filtro:hover { border-color: #e63946; color: #e63946; }
html:not(.dark) .chip-filtro.active { background: #e63946; border-color: #e63946; color: #fff; }

/* ── Selects y formularios ── */
html:not(.dark) select.form-control {
    background: #ffffff;
    color: #111111;
    border-color: #e0e0e0;
}
html:not(.dark) .form-control:focus { border-color: #e63946; }

/* ── Botón ver / paginación ── */
html:not(.dark) .btn-ver {
    background: #ffffff;
    border-color: #e0e0e0;
    color: #333333;
}
html:not(.dark) .btn-ver:hover { border-color: #e63946; color: #e63946; }
html:not(.dark) .page-btn {
    background: #ffffff;
    border-color: #e0e0e0;
    color: #444444;
}
html:not(.dark) .page-btn:hover,
html:not(.dark) .page-btn.active { background: #e63946; border-color: #e63946; color: #fff; }

/* ── Tarjetas de producto ── */
html:not(.dark) .prod-card {
    background: #ffffff;
    border-color: #eeeeee;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
html:not(.dark) .prod-card:hover {
    border-color: #d0d0d0;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
html:not(.dark) .prod-img,
html:not(.dark) .prod-img-placeholder { background: #f8f8f8; }
html:not(.dark) .prod-nombre { color: #111111; }
html:not(.dark) .prod-footer { border-color: #eeeeee; }

/* ── Section title ── */
html:not(.dark) .section-title { color: #111111; }
html:not(.dark) .section-title::after { background: #e5e5e5; }

/* ── Features strip ── */
html:not(.dark) .features-strip {
    background: #ffffff;
    border-color: #e5e5e5;
}
html:not(.dark) .feature-item { border-color: #e5e5e5; }
html:not(.dark) .feature-text strong { color: #111111; }
html:not(.dark) .feature-text span { color: #666666; }

/* ── Cart panel ── */
html:not(.dark) .cart-panel { background: #f8f8f8; }
html:not(.dark) .cart-item { border-color: #eeeeee; }
html:not(.dark) .cart-item-img,
html:not(.dark) .cart-item-img-placeholder { background: #ffffff; }
html:not(.dark) .cart-item-nombre { color: #111111; }
html:not(.dark) .cart-item-precio { color: #666666; }
html:not(.dark) .cart-footer { background: #ffffff; border-color: #e5e5e5; }
html:not(.dark) .cart-total { color: #111111; }

/* ── Modal / checkout ── */
html:not(.dark) .modal-box {
    background: #ffffff;
    border: 1px solid #eeeeee;
}
html:not(.dark) .modal-title { color: #111111; }
html:not(.dark) .modal-box .form-group label { color: #555555; }
html:not(.dark) #resumen-pedido { background: #f5f5f5; color: #333333; }
html:not(.dark) #ch-cupon { background: #ffffff; border-color: #e0e0e0; color: #111111; }

/* ── Tabla y sección badge stock ── */
html:not(.dark) .badge-ultimas { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

/* ── Autocomplete search ── */
html:not(.dark) .search-autocomplete { background: #ffffff; border-color: #e0e0e0; box-shadow: 0 4px 20px rgba(0,0,0,.10); }
html:not(.dark) .search-ac-item:hover { background: #f5f5f5; }
html:not(.dark) .search-ac-nombre { color: #111111; }
html:not(.dark) .search-ac-precio { color: #e63946; }
/* ── PRECIOS PEDIDOS ── */

.precio-pedido {
    font-weight: 900;
    color: var(--dark);
}

.precio-pedido.usd {
    color: #2563eb;
}
/* ════════════════════════════════════════════════════
   RESPONSIVE MOBILE — Todas las páginas
   ════════════════════════════════════════════════════ */

/* ── BASE MOBILE (≤820px) ── */
@media (max-width: 820px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    .container { padding: 0 14px; }

    /* Sección hero */
    .hero { padding: 36px 16px; }
    .hero h1 { font-size: clamp(22px, 6vw, 38px); }
    .hero p  { font-size: 14px; }
    .hero-btns { flex-direction: column; gap: 10px; }

    /* Grid de productos */
    .productos-grid {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
        gap: 10px;
    }
    .prod-card { border-radius: 12px; }
    .prod-img  { height: 140px; }

    /* Detalle de producto */
    .prod-detalle { grid-template-columns: 1fr; gap: 20px; }

    /* Features strip */
    .features-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .features-inner { flex-wrap: nowrap; min-width: max-content; }

    /* ── PERFIL ── */
    .perfil-grid,
    [class*="perfil"] .grid-2col,
    .perfil-layout { grid-template-columns: 1fr !important; gap: 16px; }
    .stats-row { flex-wrap: wrap; gap: 10px; }
    .stats-row > * { flex: 1 1 calc(50% - 10px); min-width: 120px; }

    /* ── CHECKOUT ── */
    .checkout-grid,
    .checkout-layout { grid-template-columns: 1fr !important; gap: 16px; }
    .checkout-summary { order: -1; }
    .payment-methods { flex-direction: column; gap: 8px; }
    .pay-method { width: 100% !important; }

    /* ── VENDER ── */
    .vender-grid,
    .iphone-grid { grid-template-columns: 1fr !important; gap: 14px; }
    .vender-steps { flex-direction: column; gap: 14px; }
    .vender-step { text-align: center; }

    /* ── JUGAR ── */
    .juegos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .juego-card  { padding: 16px 12px; }
    .juego-icon  { font-size: 32px; }

    /* ── RANKING ── */
    .ranking-podio { flex-direction: column; align-items: center; gap: 12px; }
    .ranking-podio .pos-1,
    .ranking-podio .pos-2,
    .ranking-podio .pos-3 { max-width: 100%; width: 100%; }
    .ranking-table { font-size: 13px; }
    .ranking-table td { padding: 8px 10px; }

    /* ── SEGUIR ── */
    .seguir-grid,
    .social-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }

    /* ── CANJEAR ── */
    .canjear-grid,
    .items-canje-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }

    /* ── HISTORIAL ── */
    .historial-tabla { overflow-x: auto; display: block; }
    .historial-tabla table { min-width: 500px; }

    /* ── JUEGO (pantalla de juego) ── */
    #game-container,
    .game-wrap { max-width: 100vw; padding: 0 !important; }
    canvas { max-width: 100%; height: auto !important; }

    /* ── Footer ── */
    .footer { padding: 32px 0 16px; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

    /* ── Modales ── */
    .modal-box { margin: 12px; max-height: 92vh; }
    #auth-box   { max-width: 100%; margin: 12px; }

    /* ── Tablas generales ── */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 480px; }

    /* ── Cards 2-col genéricas ── */
    .grid-2 { grid-template-columns: 1fr !important; }
    .grid-3 { grid-template-columns: 1fr 1fr !important; }
    .grid-4 { grid-template-columns: 1fr 1fr !important; }

    /* Botones en fila → columna */
    .btn-row { flex-direction: column; gap: 8px; }
    .btn-row .btn { width: 100%; justify-content: center; }

    /* Sección de página interna */
    .page-header { padding: 24px 16px 16px; }
    .page-header h1 { font-size: clamp(20px, 5vw, 32px); }
    .section-title { font-size: clamp(18px, 4vw, 26px); }
}

/* ── EXTRA SMALL (≤480px) ── */
@media (max-width: 480px) {
    .productos-grid  { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .juegos-grid     { grid-template-columns: repeat(2, 1fr); }
    .seguir-grid,
    .social-grid     { grid-template-columns: 1fr !important; }
    .canjear-grid,
    .items-canje-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-row > *   { flex: 1 1 100%; }
    .checkout-grid   { padding: 0 8px; }
    .perfil-avatar   { width: 70px; height: 70px; font-size: 28px; }
    .dbadge, .svbadge { font-size: 12px; padding: 7px 12px; }
}

/* ════════════════════════════════════════════════════
   TV DISPLAY (ranking-tv.php) — Optimizado para tele
   ════════════════════════════════════════════════════ */
@media screen and (min-width: 1200px) {
    /* Escala de texto para TV de gran resolución */
    .tv-logo   { font-size: clamp(28px, 3vw, 48px); }
    .tv-clock  { font-size: clamp(24px, 2.5vw, 42px); }
    .rk-title h1 { font-size: clamp(42px, 6vw, 80px); }
    .pn { font-size: clamp(16px, 1.5vw, 22px); }
    .pp { font-size: clamp(28px, 3vw, 44px); }
    .rk-table td { padding: 12px 20px; font-size: clamp(16px, 1.5vw, 22px); }
    .demo-info h2 { font-size: clamp(44px, 6vw, 72px); }
    .demo-info p  { font-size: clamp(18px, 2vw, 26px); }
    .cta-main { font-size: clamp(28px, 4vw, 48px); }
    .cta-sub  { font-size: clamp(14px, 1.5vw, 20px); }
    .ctac-t   { font-size: clamp(18px, 1.8vw, 26px); }
    .ctac-s   { font-size: clamp(13px, 1.2vw, 17px); }
}

/* ════════════════════════════════════════════════════
   MOBILE FIXES — Boudle card, Cart, Checkout
   ════════════════════════════════════════════════════ */

/* ── Boudle aviso card ── */
#boudle-aviso {
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    #boudle-aviso {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    #boudle-aviso > div:nth-child(3) {
        width: 100%;
        justify-content: flex-start !important;
        flex-wrap: nowrap;
    }
    #boudle-aviso > div:nth-child(2) {
        width: 100%;
    }
}

/* ── Carrito (panel lateral) ── */
@media (max-width: 820px) {
    /* Posicionamos el panel entre top:0 y bottom:68px (nav bar) — más confiable que calc(vh) */
    .cart-panel {
        width: 100vw !important;
        top: 0 !important;
        bottom: 68px !important;
        height: auto !important;
    }
    .cart-items {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* ── Checkout responsive ── */
.chk-grid-outer {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
}
.chk-inner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.chk-inner-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}
.chk-resumen-col {
    position: sticky;
    top: 80px;
    align-self: start;
}
@media (max-width: 760px) {
    .chk-grid-outer {
        grid-template-columns: 1fr !important;
    }
    .chk-resumen-col {
        position: static;
        order: -1;
    }
    .chk-inner-grid,
    .chk-inner-grid-3 {
        grid-template-columns: 1fr !important;
    }
}