/* ============================================================
   MESIAS SPORTS - CSS Principal
   Paleta: Negro profundo + Rojo fuego + Blanco
   Tipografía: Bebas Neue (display) + Inter (cuerpo)
   ============================================================ */

:root {
    --ms-negro:      #08090d;
    --ms-negro-card: #111318;
    --ms-negro-soft: #1a1d25;
    --ms-rojo:       #e8192c;
    --ms-rojo-dark:  #b8141f;
    --ms-blanco:     #f5f5f5;
    --ms-gris:       #6b7280;
    --ms-borde:      #2a2d35;
    --ms-font-display: 'Bebas Neue', sans-serif;
    --ms-font-body:    'Inter', sans-serif;
}

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

body {
    background: var(--ms-negro);
    color: var(--ms-blanco);
    font-family: var(--ms-font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ms-rojo); }

img { max-width: 100%; }

/* ---- NAVBAR ---- */
.ms-navbar {
    background: rgba(8, 9, 13, 0.97) !important;
    border-bottom: 1px solid var(--ms-borde);
    padding: 12px 0;
    backdrop-filter: blur(12px);
    z-index: 1040;
}

.ms-logo {
    font-family: var(--ms-font-display);
    font-size: 1.6rem;
    letter-spacing: 1px;
}
.logo-mesias { color: var(--ms-blanco); }
.logo-sports { color: var(--ms-rojo); }

/* Buscador navbar */
.ms-search {
    width: 38%;
    position: relative;
}
.ms-search-input {
    background: var(--ms-negro-soft);
    border: 1px solid var(--ms-borde);
    border-right: none;
    color: var(--ms-blanco);
    border-radius: 6px 0 0 6px;
    padding: 8px 16px;
    font-size: 14px;
    transition: border-color .2s;
}
.ms-search-input:focus {
    outline: none;
    border-color: var(--ms-rojo);
    background: var(--ms-negro-soft);
    color: var(--ms-blanco);
    box-shadow: none;
}
.ms-search-input::placeholder { color: var(--ms-gris); }
.ms-search-btn {
    background: var(--ms-rojo);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: background .2s;
}
.ms-search-btn:hover { background: var(--ms-rojo-dark); }

/* Nav links */
.ms-nav-link {
    color: var(--ms-gris) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px !important;
    border-radius: 6px;
    transition: color .2s, background .2s;
    position: relative;
}
.ms-nav-link:hover {
    color: var(--ms-blanco) !important;
    background: var(--ms-negro-soft);
}

/* Badge carrito */
.ms-cart-link { position: relative; }
.ms-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    background: var(--ms-rojo);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Dropdown */
.ms-dropdown {
    background: var(--ms-negro-soft);
    border: 1px solid var(--ms-borde);
    border-radius: 10px;
    padding: 8px;
    min-width: 220px;
}
.ms-dropdown .dropdown-item {
    color: var(--ms-gris);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.ms-dropdown .dropdown-item:hover {
    background: var(--ms-negro-card);
    color: var(--ms-blanco);
}

/* Botones navbar */
.ms-btn-outline {
    border: 1px solid var(--ms-borde);
    color: var(--ms-blanco);
    background: transparent;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .2s, background .2s;
}
.ms-btn-outline:hover {
    border-color: var(--ms-rojo);
    color: var(--ms-rojo);
}
.ms-btn-primary {
    background: var(--ms-rojo);
    color: #fff !important;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    transition: background .2s, transform .1s;
}
.ms-btn-primary:hover {
    background: var(--ms-rojo-dark);
    transform: translateY(-1px);
}

/* ---- CATEGORÍAS BAR ---- */
.ms-cat-bar {
    background: var(--ms-negro-card);
    border-bottom: 1px solid var(--ms-borde);
}
.ms-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
}
.ms-cat-list li a {
    display: block;
    padding: 11px 16px;
    color: var(--ms-gris);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .2s, border-bottom .2s;
    border-bottom: 2px solid transparent;
}
.ms-cat-list li a:hover {
    color: var(--ms-blanco);
    border-bottom-color: var(--ms-rojo);
}
.ms-ai-link { color: var(--ms-rojo) !important; }
.ms-ai-link:hover { color: var(--ms-rojo-dark) !important; }

/* ---- HERO ---- */
.ms-hero {
    background: linear-gradient(135deg, #08090d 0%, #12151e 60%, #1a0408 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.ms-hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at right, rgba(232,25,44,.08) 0%, transparent 70%);
    pointer-events: none;
}
.ms-hero-tag {
    display: inline-block;
    background: rgba(232,25,44,.12);
    color: var(--ms-rojo);
    border: 1px solid rgba(232,25,44,.25);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.ms-hero-title {
    font-family: var(--ms-font-display);
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 1;
    color: var(--ms-blanco);
    letter-spacing: 1px;
    margin-bottom: 20px;
}
.ms-hero-title span { color: var(--ms-rojo); }
.ms-hero-sub {
    color: var(--ms-gris);
    font-size: 16px;
    max-width: 480px;
    margin-bottom: 32px;
}
.ms-hero-img {
    border-radius: 16px;
    object-fit: cover;
    max-height: 420px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(232,25,44,.15);
}

/* ---- SECCIÓN TÍTULOS ---- */
.ms-section-title {
    font-family: var(--ms-font-display);
    font-size: 2rem;
    letter-spacing: 1px;
    color: var(--ms-blanco);
}
.ms-section-line {
    display: inline-block;
    width: 40px;
    height: 3px;
    background: var(--ms-rojo);
    margin-bottom: 4px;
    border-radius: 2px;
}

/* ---- TARJETA CATEGORÍA ---- */
.ms-cat-card {
    background: var(--ms-negro-card);
    border: 1px solid var(--ms-borde);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    transition: border-color .25s, transform .25s;
    cursor: pointer;
}
.ms-cat-card:hover {
    border-color: var(--ms-rojo);
    transform: translateY(-4px);
}
.ms-cat-card i {
    font-size: 2rem;
    color: var(--ms-rojo);
    margin-bottom: 10px;
    display: block;
}
.ms-cat-card span {
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-blanco);
    letter-spacing: .5px;
}

/* ---- TARJETA PRODUCTO ---- */
.ms-product-card {
    background: var(--ms-negro-card);
    border: 1px solid var(--ms-borde);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ms-product-card:hover {
    border-color: rgba(232,25,44,.4);
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(232,25,44,.08);
}
.ms-product-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ms-negro-soft);
}
.ms-product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.ms-product-card:hover .ms-product-img-wrap img {
    transform: scale(1.06);
}
.ms-product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--ms-rojo);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ms-product-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ms-product-liga {
    font-size: 11px;
    color: var(--ms-gris);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.ms-product-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-blanco);
    margin-bottom: auto;
    line-height: 1.4;
}
.ms-product-precio {
    font-family: var(--ms-font-display);
    font-size: 1.4rem;
    color: var(--ms-rojo);
    margin: 12px 0 10px;
}
.ms-product-btn {
    display: block;
    background: transparent;
    border: 1px solid var(--ms-borde);
    color: var(--ms-blanco);
    text-align: center;
    padding: 9px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: background .2s, border-color .2s;
}
.ms-product-btn:hover {
    background: var(--ms-rojo);
    border-color: var(--ms-rojo);
    color: #fff;
}

/* ---- BANNER IA ---- */
.ms-ia-banner {
    background: linear-gradient(135deg, var(--ms-negro-soft) 0%, #1a0408 100%);
    border: 1px solid rgba(232,25,44,.2);
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
}
.ms-ia-banner h2 {
    font-family: var(--ms-font-display);
    font-size: 2.5rem;
    letter-spacing: 1px;
}
.ms-ia-banner p { color: var(--ms-gris); }

/* ---- FORMULARIOS ---- */
.ms-form-card {
    background: var(--ms-negro-card);
    border: 1px solid var(--ms-borde);
    border-radius: 16px;
    padding: 40px;
}
.ms-form-control {
    background: var(--ms-negro-soft) !important;
    border: 1px solid var(--ms-borde) !important;
    color: var(--ms-blanco) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px;
    transition: border-color .2s !important;
}
.ms-form-control:focus {
    border-color: var(--ms-rojo) !important;
    box-shadow: 0 0 0 3px rgba(232,25,44,.1) !important;
    outline: none !important;
}
.ms-form-control::placeholder { color: var(--ms-gris) !important; }
.ms-form-label {
    color: var(--ms-gris);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}
.ms-form-select {
    background: var(--ms-negro-soft) !important;
    border: 1px solid var(--ms-borde) !important;
    color: var(--ms-blanco) !important;
    border-radius: 8px !important;
}

/* ---- CARRITO ---- */
.ms-cart-item {
    background: var(--ms-negro-card);
    border: 1px solid var(--ms-borde);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color .2s;
}
.ms-cart-item:hover { border-color: rgba(232,25,44,.2); }
.ms-cart-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--ms-negro-soft);
}

/* ---- RESUMEN PEDIDO ---- */
.ms-order-summary {
    background: var(--ms-negro-card);
    border: 1px solid var(--ms-borde);
    border-radius: 14px;
    padding: 24px;
    position: sticky;
    top: 80px;
}
.ms-divider {
    border-color: var(--ms-borde);
    margin: 16px 0;
}

/* ---- PANEL ADMIN / CUENTA ---- */
.ms-stat-card {
    background: var(--ms-negro-card);
    border: 1px solid var(--ms-borde);
    border-radius: 14px;
    padding: 24px;
    transition: border-color .2s;
}
.ms-stat-card:hover { border-color: rgba(232,25,44,.3); }
.ms-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 12px;
}
.ms-stat-icon.red   { background: rgba(232,25,44,.12); color: var(--ms-rojo); }
.ms-stat-icon.green { background: rgba(34,197,94,.12); color: #22c55e; }
.ms-stat-icon.blue  { background: rgba(59,130,246,.12); color: #3b82f6; }
.ms-stat-icon.gold  { background: rgba(234,179,8,.12);  color: #eab308; }

.ms-stat-value {
    font-family: var(--ms-font-display);
    font-size: 2rem;
    color: var(--ms-blanco);
    line-height: 1;
    margin-bottom: 4px;
}
.ms-stat-label { color: var(--ms-gris); font-size: 13px; }

/* ---- TABLA ---- */
.ms-table {
    color: var(--ms-blanco);
    font-size: 14px;
}
.ms-table thead th {
    color: var(--ms-gris);
    border-color: var(--ms-borde);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 12px 16px;
}
.ms-table tbody td {
    border-color: var(--ms-borde);
    padding: 14px 16px;
    vertical-align: middle;
}
.ms-table tbody tr { transition: background .15s; }
.ms-table tbody tr:hover { background: var(--ms-negro-soft); }

/* ---- ESTADO BADGE ---- */
.ms-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ms-estado.pendiente  { background: rgba(234,179,8,.12);  color: #eab308; }
.ms-estado.pagado     { background: rgba(59,130,246,.12); color: #3b82f6; }
.ms-estado.confirmado { background: rgba(139,92,246,.12); color: #8b5cf6; }
.ms-estado.enviado    { background: rgba(34,197,94,.12);  color: #22c55e; }
.ms-estado.entregado  { background: rgba(34,197,94,.2);   color: #16a34a; }
.ms-estado.cancelado  { background: rgba(232,25,44,.12);  color: var(--ms-rojo); }

/* ---- ALERT FLASH ---- */
.ms-alert-success {
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.2);
    color: #22c55e;
    border-radius: 8px;
}
.ms-alert-error {
    background: rgba(232,25,44,.1);
    border: 1px solid rgba(232,25,44,.2);
    color: #f87171;
    border-radius: 8px;
}

/* ---- SIDEBAR PANEL ---- */
.ms-sidebar {
    background: var(--ms-negro-card);
    border-right: 1px solid var(--ms-borde);
    min-height: 100vh;
    padding: 24px 0;
}
.ms-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    color: var(--ms-gris);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s, background .2s;
    border-left: 3px solid transparent;
}
.ms-sidebar-link:hover,
.ms-sidebar-link.active {
    color: var(--ms-blanco);
    background: var(--ms-negro-soft);
    border-left-color: var(--ms-rojo);
}

/* ---- UPLOAD ZONA IA ---- */
.ms-upload-zone {
    border: 2px dashed var(--ms-borde);
    border-radius: 16px;
    padding: 60px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.ms-upload-zone:hover,
.ms-upload-zone.drag-over {
    border-color: var(--ms-rojo);
    background: rgba(232,25,44,.04);
}
.ms-upload-zone i { font-size: 3rem; color: var(--ms-gris); margin-bottom: 16px; }

/* ---- FOOTER ---- */
.ms-footer {
    background: var(--ms-negro-card);
    border-top: 1px solid var(--ms-borde);
}
.ms-footer-links li { margin-bottom: 8px; }
.ms-footer-links a {
    color: var(--ms-gris);
    font-size: 14px;
    transition: color .2s;
}
.ms-footer-links a:hover { color: var(--ms-rojo); }
.ms-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--ms-borde);
    color: var(--ms-gris);
    font-size: 15px;
    margin-right: 8px;
    transition: border-color .2s, color .2s;
}
.ms-social a:hover { border-color: var(--ms-rojo); color: var(--ms-rojo); }
.ms-footer-bottom {
    border-top: 1px solid var(--ms-borde);
    padding: 20px 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .ms-hero { padding: 48px 0; }
    .ms-form-card { padding: 24px 16px; }
    .ms-ia-banner { padding: 32px 20px; }
}