/**
 * JD CRIMSON LIGHT - Tema Claro
 * Autor: Juan David Zapata
 * Versión: 1.0
 * Fecha: Octubre 21, 2025
 * 
 * Sistema de diseño moderno con degradados sutiles en modo claro,
 * acento rojo/rosa vibrante y espaciado compacto.
 * 
 * IMPORTANTE: Este archivo requiere jd-crimson-core.css
 */

/* ========================================
   VARIABLES DEL TEMA CLARO
   ======================================== */

:root {
    /* Colores Base - Light Theme */
    --jd-light-bg-body: #f5f5f5;
    --jd-light-bg-main: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    --jd-light-bg-card: linear-gradient(135deg, #ffffff 0%, #f2e7e7 100%);
    --jd-light-bg-card-hover: linear-gradient(135deg, #fafafa 0%, #ebe0e0 100%);
    --jd-light-bg-header: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    
    /* Bordes */
    --jd-light-border-color: #d8d8d8;
    --jd-light-border-color-hover: #c0c0c0;
    --jd-light-border-color-light: #e5e5e5;
    
    /* Texto */
    --jd-light-text-primary: #1a1a1a;
    --jd-light-text-secondary: #333333;
    --jd-light-text-muted: #666666;
    --jd-light-text-label: #777777;
    --jd-light-text-disabled: #999999;
    
    /* Sombras */
    --jd-light-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
    --jd-light-shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
    --jd-light-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.18);
    --jd-light-shadow-crimson: 0 4px 15px rgba(255, 77, 109, 0.3);
}

/* ========================================
   ESTILOS GLOBALES - LIGHT
   ======================================== */

body.jd-light-theme {
    background-color: var(--jd-light-bg-body);
    color: var(--jd-light-text-secondary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.jd-light-theme h1,
body.jd-light-theme h2,
body.jd-light-theme h3,
body.jd-light-theme h4,
body.jd-light-theme h5,
body.jd-light-theme h6,
body.jd-light-theme .jd-title {
    color: var(--jd-light-text-primary);
}

/* ========================================
   CARDS CON DEGRADADO - LIGHT
   ======================================== */

.card-jd-crimson-light,
.jd-card-light {
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    border-radius: var(--jd-radius-lg);
    color: var(--jd-light-text-primary);
    transition: var(--jd-transition);
    box-shadow: var(--jd-light-shadow-sm);
}

.card-jd-crimson-light:hover,
.jd-card-light:hover {
    background: var(--jd-light-bg-card-hover);
    border-color: var(--jd-light-border-color-hover);
    transform: translateY(-2px);
    box-shadow: var(--jd-light-shadow-md);
}

.card-jd-crimson-light .card-body,
.jd-card-light .card-body {
    color: var(--jd-light-text-secondary);
}

.card-jd-crimson-light .card-title,
.jd-card-light .card-title {
    color: var(--jd-light-text-primary);
    font-weight: 600;
}

/* Card sin hover effect */
.card-jd-crimson-light.no-hover:hover,
.jd-card-light.no-hover:hover {
    transform: none;
    box-shadow: var(--jd-light-shadow-sm);
}

/* Card Dashboard - Light */
.card-dashboard-light {
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    border-radius: var(--jd-radius-lg);
    box-shadow: var(--jd-light-shadow-md);
    transition: var(--jd-transition);
    cursor: pointer;
}

.card-dashboard-light:hover {
    transform: translateY(-5px);
    box-shadow: var(--jd-light-shadow-lg);
    border-color: rgba(255, 77, 109, 0.4);
}

/* Card Custom - Light */
.card-custom-light {
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    border-radius: var(--jd-radius-lg);
    box-shadow: var(--jd-light-shadow-md);
    transition: var(--jd-transition);
}

.card-custom-light:hover {
    transform: translateY(-2px);
    box-shadow: var(--jd-light-shadow-lg);
}

/* Summary Card - Light */
.summary-card-light {
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    border-radius: var(--jd-radius-lg);
    padding: var(--jd-spacing-lg);
    box-shadow: var(--jd-light-shadow-md);
    transition: var(--jd-transition);
}

.summary-card-light:hover {
    transform: translateY(-2px);
    box-shadow: var(--jd-light-shadow-lg);
}

/* Mod Card - Light */
.mod-card-light {
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    border-radius: var(--jd-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--jd-light-shadow-md);
    transition: var(--jd-transition);
}

/* ========================================
   BADGES - LIGHT
   ======================================== */

.badge-crimson-light {
    background: var(--jd-crimson-gradient) !important;
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(255, 77, 109, 0.3);
    border-radius: var(--jd-radius-pill);
    padding: 6px 14px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-light {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-pendiente-light {
    background: linear-gradient(135deg, #FFB74D 0%, #F57C00 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 167, 38, 0.3);
}

.badge-aprobado-light {
    background: linear-gradient(135deg, #81C784 0%, #2E7D32 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.badge-enviado-light {
    background: linear-gradient(135deg, #64B5F6 0%, #1565C0 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(66, 165, 245, 0.3);
}

.badge-completado-light {
    background: linear-gradient(135deg, #4DD0E1 0%, #00838F 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(38, 198, 218, 0.3);
}

.badge-cancelado-light {
    background: linear-gradient(135deg, #E57373 0%, #C62828 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 83, 80, 0.3);
}

.badge-stock-light {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-stock-light.high {
    background: rgba(76, 175, 80, 0.15);
    color: #2E7D32;
    border: 1px solid #66BB6A;
}

.badge-stock-light.low {
    background: rgba(255, 167, 38, 0.15);
    color: #E65100;
    border: 1px solid #FFA726;
}

.badge-stock-light.out {
    background: rgba(239, 83, 80, 0.15);
    color: #C62828;
    border: 1px solid #EF5350;
}

/* ========================================
   BOTONES - LIGHT
   ======================================== */

.btn-crimson-light,
.btn-jd-primary-light {
    background: var(--jd-crimson-gradient);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: var(--jd-radius-md);
    padding: 12px 24px;
    transition: var(--jd-transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
}

.btn-crimson-light:hover,
.btn-jd-primary-light:hover {
    background: var(--jd-crimson-gradient-hover);
    transform: translateY(-2px);
    box-shadow: var(--jd-light-shadow-crimson);
    color: #fff;
}

.btn-crimson-light:active,
.btn-jd-primary-light:active {
    transform: translateY(0);
}

.btn-jd-secondary-light {
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    color: var(--jd-light-text-primary);
    font-weight: 600;
    border-radius: var(--jd-radius-md);
    padding: 12px 24px;
    transition: var(--jd-transition);
}

.btn-jd-secondary-light:hover {
    background: var(--jd-light-bg-card-hover);
    border-color: var(--jd-light-border-color-hover);
    color: var(--jd-light-text-primary);
    transform: translateY(-2px);
    box-shadow: var(--jd-light-shadow-sm);
}

.btn-view-light {
    background: linear-gradient(135deg, #ff5577 0%, #b81848 100%);
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 77, 109, 0.3);
}

.btn-view-light:hover {
    background: linear-gradient(135deg, #ff7a94 0%, #cc2050 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 77, 109, 0.5);
    color: #fff;
}

/* ========================================
   TABLAS - LIGHT
   ======================================== */

.table-light-theme {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: rgba(255, 77, 109, 0.03);
    background: transparent;
    color: var(--jd-light-text-secondary);
}

.table-light-theme thead th {
    background: rgba(255, 77, 109, 0.08);
    color: var(--jd-crimson-dark);
    border-color: var(--jd-light-border-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.table-light-theme tbody td {
    border-color: var(--jd-light-border-color);
    color: var(--jd-light-text-secondary);
}

.table-light-theme tbody tr:hover {
    background: rgba(255, 77, 109, 0.03);
}

.table-light-theme th,
.table-light-theme td {
    padding: 15px;
}

/* ========================================
   FORMS & INPUTS - LIGHT
   ======================================== */

.form-control-light,
.form-select-light {
    background: #ffffff;
    border: 1px solid var(--jd-light-border-color);
    color: var(--jd-light-text-primary);
    border-radius: var(--jd-radius-md);
    transition: var(--jd-transition);
}

.form-control-light:focus,
.form-select-light:focus {
    background: #ffffff;
    border-color: var(--jd-crimson);
    box-shadow: 0 0 0 0.2rem rgba(255, 77, 109, 0.15);
    color: var(--jd-light-text-primary);
}

.form-control-light::placeholder {
    color: var(--jd-light-text-label);
}

.form-label-light {
    color: var(--jd-light-text-muted);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* ========================================
   STAT CARDS - LIGHT
   ======================================== */

.stat-card-light {
    display: block;
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    border-radius: var(--jd-radius-lg);
    padding: var(--jd-spacing-lg);
    transition: var(--jd-transition);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--jd-light-shadow-sm);
}

.stat-card-light:hover {
    background: var(--jd-light-bg-card-hover);
    transform: translateY(-5px);
    box-shadow: var(--jd-light-shadow-lg);
    border-color: var(--jd-light-border-color-hover);
    text-decoration: none;
    color: inherit;
}

.stat-icon-light {
    width: 70px;
    height: 70px;
    border-radius: var(--jd-radius-full);
    background: rgba(255, 77, 109, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--jd-spacing-sm);
}

.stat-icon-light i {
    font-size: 30px;
    color: var(--jd-crimson);
}

.stat-number-light {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--jd-light-text-primary);
    font-family: 'MazzardH', sans-serif;
    margin: 0;
}

.stat-label-light {
    font-size: 13px;
    color: var(--jd-light-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* ========================================
   ACTION CARDS - LIGHT
   ======================================== */

.action-card-light {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgb(255 77 109 / 22%) 0%, rgb(201 24 74 / 41%) 100%);
    border: 1px solid rgba(255, 77, 109, 0.4);
    color: #fff;
    padding: 1.5rem;
    border-radius: var(--jd-radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(255, 77, 109, 0.25);
}

.action-card-light:hover {
    background: linear-gradient(135deg, rgb(255 77 109 / 30%) 0%, rgb(201 24 74 / 50%) 100%);
    border-color: var(--jd-crimson);
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 77, 109, 0.45);
    text-decoration: none;
}

.action-icon-light {
    font-size: 1.5rem;
    color: #fff;
}

.action-title-light {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

/* ========================================
   SECTION HEADERS - LIGHT
   ======================================== */

.section-header-light {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.section-icon-light {
    color: var(--jd-crimson);
    font-size: 1.5rem;
}

.section-title-light {
    font-family: 'MazzardH', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jd-light-text-primary);
    margin: 0;
    line-height: 1;
}

.admin-title-light {
    font-family: 'MazzardH', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--jd-light-text-primary);
    margin: 0;
}

.admin-subtitle-light {
    color: var(--jd-light-text-muted);
    font-size: 1.1rem;
    margin: 0;
}

/* ========================================
   TABLE CONTAINER - LIGHT
   ======================================== */

.table-container-light {
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    border-radius: var(--jd-radius-lg);
    padding: var(--jd-spacing-lg);
    box-shadow: var(--jd-light-shadow-sm);
}

/* ========================================
   PRICE BOX - LIGHT
   ======================================== */

.price-box-light {
    background: linear-gradient(135deg, #ffffff 0%, #f2e7e7 100%);
    border: 1px solid var(--jd-light-border-color-light);
    border-radius: var(--jd-radius-xl);
    padding: var(--jd-spacing-md);
    margin-bottom: var(--jd-spacing-lg);
    box-shadow: var(--jd-light-shadow-sm);
}

.price-label-light {
    font-size: 11px;
    color: var(--jd-light-text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 5px;
}

.current-price-light {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--jd-light-text-primary);
    font-family: 'MazzardH', sans-serif;
}

.original-price-light {
    font-size: 1.2rem;
    color: var(--jd-light-text-label);
    text-decoration: line-through;
}

.discount-tag-light {
    background: var(--jd-crimson-gradient);
    padding: 8px 18px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    box-shadow: var(--jd-light-shadow-crimson);
    display: inline-block;
}

/* ========================================
   AVATAR / PROFILE - LIGHT
   ======================================== */

.profile-avatar-light,
.jd-avatar-light {
    width: 100px;
    height: 100px;
    background: var(--jd-crimson-gradient);
    border-radius: var(--jd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    border: 4px solid var(--jd-light-border-color-hover);
}

.jd-avatar-sm-light {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    border: 2px solid var(--jd-light-border-color-hover);
}

.jd-avatar-lg-light {
    width: 150px;
    height: 150px;
    font-size: 4rem;
    border: 6px solid var(--jd-light-border-color-hover);
}

/* ========================================
   ALERTS - LIGHT
   ======================================== */

.alert-jd-info-light {
    background: linear-gradient(135deg, #E3F2FD 0%, #90CAF9 100%);
    border: 2px solid #64B5F6;
    color: #1565C0;
    border-radius: var(--jd-radius-md);
    box-shadow: 0 2px 10px rgba(66, 165, 245, 0.2);
}

.alert-jd-success-light {
    background: linear-gradient(135deg, #E8F5E9 0%, #A5D6A7 100%);
    border: 2px solid #81C784;
    color: #2E7D32;
    border-radius: var(--jd-radius-md);
    box-shadow: 0 2px 10px rgba(76, 175, 80, 0.2);
}

.alert-jd-warning-light {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFCC80 100%);
    border: 2px solid #FFB74D;
    color: #E65100;
    border-radius: var(--jd-radius-md);
    box-shadow: 0 2px 10px rgba(255, 167, 38, 0.2);
}

.alert-jd-danger-light {
    background: linear-gradient(135deg, #FFEBEE 0%, #EF9A9A 100%);
    border: 2px solid #E57373;
    color: #C62828;
    border-radius: var(--jd-radius-md);
    box-shadow: 0 2px 10px rgba(239, 83, 80, 0.2);
}

/* ========================================
   MODALS - LIGHT
   ======================================== */

.modal-content-light {
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    border-radius: var(--jd-radius-lg);
}

.modal-header-light {
    border-bottom: 1px solid var(--jd-light-border-color);
}

.modal-footer-light {
    border-top: 1px solid var(--jd-light-border-color);
}

.modal-title-light {
    color: var(--jd-light-text-primary);
    font-weight: 700;
}

.modal-body-light {
    color: var(--jd-light-text-secondary);
}

/* ========================================
   SEARCH BOX - LIGHT
   ======================================== */

.search-box-light {
    background: var(--jd-light-bg-card);
    border: 1px solid var(--jd-light-border-color);
    border-radius: var(--jd-radius-lg);
    padding: var(--jd-spacing-md);
    margin-bottom: var(--jd-spacing-lg);
    box-shadow: var(--jd-light-shadow-sm);
}

/* ========================================
   ADMIN HEADER - LIGHT
   ======================================== */

.admin-header-light {
    background: var(--jd-light-bg-header);
    border-bottom: 2px solid var(--jd-crimson);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 15px 0;
    box-shadow: var(--jd-light-shadow-sm);
}

.admin-header-light .navbar-brand {
    font-family: 'MazzardH', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jd-light-text-primary);
}

.admin-header-light .nav-link {
    color: var(--jd-light-text-muted);
    transition: var(--jd-transition);
    padding: 8px 16px;
    border-radius: var(--jd-radius-md);
}

.admin-header-light .nav-link:hover {
    color: var(--jd-crimson);
    background: rgba(255, 77, 109, 0.08);
    transform: translateY(-2px);
}

.admin-header-light .nav-link.active {
    color: var(--jd-crimson);
    background: rgba(255, 77, 109, 0.12);
}

/* ========================================
   ADMIN HERO - LIGHT
   ======================================== */

.admin-hero-light {
    background: linear-gradient(135deg, #ffffff 0%, #f2e7e7 100%);
    border: 1px solid var(--jd-light-border-color-hover);
    border-radius: var(--jd-radius-xl);
    padding: var(--jd-spacing-xl);
    margin-bottom: var(--jd-spacing-xl);
    box-shadow: var(--jd-light-shadow-md);
}

.admin-hero-light h1 {
    font-family: 'MazzardH', sans-serif;
    color: var(--jd-light-text-primary);
    margin-bottom: var(--jd-spacing-xs);
}

/* ========================================
   UTILITIES - LIGHT
   ======================================== */

.bg-jd-light {
    background: var(--jd-light-bg-body) !important;
}

.text-light-primary {
    color: var(--jd-light-text-primary) !important;
}

.text-light-secondary {
    color: var(--jd-light-text-secondary) !important;
}

.text-light-muted {
    color: var(--jd-light-text-muted) !important;
}