/* ============================================================
   panel.css — Sistema de diseño del panel REDWORK
   Cargado en: todas las vistas de cliente, profesional, proveedor
   Depende de: Bootstrap 5.3, FontAwesome 6.4, style.css
   ============================================================ */

/* ===== TOKENS (mismos que auth.css para consistencia total) ===== */
:root {
    --rw-orange:        #f97316;
    --rw-orange-dark:   #ea6c0a;
    --rw-orange-light:  #fb923c;
    --rw-orange-glow:   rgba(249,115,22,0.25);
    --rw-navy:          #0f172a;
    --rw-navy2:         #1e293b;
    --rw-navy3:         #0d1424;
    --rw-slate:         #334155;
    --rw-border:        rgba(148,163,184,0.12);
    --rw-border-solid:  #334155;
    --rw-text:          #f1f5f9;
    --rw-text2:         #cbd5e1;
    --rw-muted:         #64748b;
    --rw-success:       #10b981;
    --rw-danger:        #ef4444;
    --rw-warning:       #f59e0b;
    --rw-info:          #3b82f6;
    --font-display:     'Bebas Neue', sans-serif;
    --font-body:        'Plus Jakarta Sans', sans-serif;
    --ease-expo:        cubic-bezier(0.16,1,0.3,1);
    --radius-sm:        0.5rem;
    --radius-md:        0.75rem;
    --radius-lg:        1rem;
}

/* ===== RESET TIPOGRÁFICO (sobrescribe style.css que usaba Inter) ===== */
body {
    font-family: var(--font-body);
    background: var(--rw-navy3);
    color: var(--rw-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--rw-text);
}

/* Headings decorativos con Bebas Neue */
.rw-display {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}

/* ===== UTILIDADES DE COLOR ===== */
.text-orange  { color: var(--rw-orange) !important; }
.text-rw-muted { color: var(--rw-muted) !important; }
.text-rw-text2 { color: var(--rw-text2) !important; }

/* Aliases compatibles con el código existente en vistas */
.text-gray-400  { color: #94a3b8 !important; }
.text-gray-500  { color: var(--rw-muted) !important; }

/* ===== LAYOUT DE PÁGINA ===== */
.page-wrapper {
    min-height: calc(100vh - 80px);
    padding: 1.5rem 0 3rem;
}

.page-header {
    margin-bottom: 1.75rem;
}

.page-header h2,
.page-header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rw-text);
    margin-bottom: 0.25rem;
}

.page-header p {
    color: var(--rw-muted);
    margin: 0;
    font-size: 0.9rem;
}

/* ===== ALERTAS ===== */
.alert {
    border-radius: var(--radius-md);
    border: none;
    font-size: 0.875rem;
}
.alert-success {
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.25);
    color: #6ee7b7;
}
.alert-danger {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    color: #fca5a5;
}
.alert-warning {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.25);
    color: #fde68a;
}
.alert-info {
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.25);
    color: #93c5fd;
}
.btn-close { filter: invert(1) opacity(0.6); }

/* ===== WELCOME CARD (dashboard) ===== */
.welcome-card {
    background: linear-gradient(135deg, var(--rw-navy2) 0%, var(--rw-navy) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(249,115,22,0.18);
    position: relative;
    overflow: hidden;
}
.welcome-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--rw-orange), transparent);
}
.welcome-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ===== STAT CARDS ===== */
.stat-card {
    background: var(--rw-navy2);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--rw-border-solid);
    transition: border-color 0.3s, transform 0.3s;
    height: 100%;
}
.stat-card:hover {
    border-color: var(--rw-orange);
    transform: translateY(-3px);
}
.stat-card i {
    font-size: 1.75rem;
    color: var(--rw-orange);
    margin-bottom: 0.75rem;
    display: block;
}
.stat-card h3 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--rw-text);
    margin-bottom: 0.25rem;
}
.stat-card p {
    color: var(--rw-muted);
    font-size: 0.82rem;
    margin: 0;
}

/* ===== PANEL CARDS (genérico para cotizaciones, solicitudes, etc.) ===== */
.panel-card {
    background: var(--rw-navy2);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--rw-border-solid);
    transition: border-color 0.3s;
    color: var(--rw-text);
}
.panel-card:hover {
    border-color: var(--rw-orange);
}
.panel-card * { color: var(--rw-text); }
.panel-card .text-muted,
.panel-card small {
    color: var(--rw-muted) !important;
}

/* Variantes de borde lateral */
.panel-card--orange  { border-left: 4px solid var(--rw-orange); }
.panel-card--success { border-left: 4px solid var(--rw-success); }
.panel-card--warning { border-left: 4px solid var(--rw-warning); }
.panel-card--danger  { border-left: 4px solid var(--rw-danger); }
.panel-card--info    { border-left: 4px solid var(--rw-info); }

/* Alias para código existente */
.solicitud-card  { @extend .panel-card; border-left: 4px solid var(--rw-orange); }
.cotizacion-card { @extend .panel-card; }
.historial-card  { @extend .panel-card; }

/* Redeclaración directa (sin @extend para compatibilidad) */
.solicitud-card {
    background: var(--rw-navy2);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--rw-border-solid);
    border-left: 4px solid var(--rw-orange);
    transition: border-color 0.3s;
    color: var(--rw-text);
}
.cotizacion-card {
    background: var(--rw-navy2);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--rw-border-solid);
    transition: border-color 0.3s;
    color: var(--rw-text);
}
.cotizacion-card:hover { border-color: var(--rw-orange); }
.cotizacion-card * { color: var(--rw-text); }
.cotizacion-card .text-muted,
.cotizacion-card small { color: var(--rw-muted) !important; }

.historial-card {
    background: var(--rw-navy2);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--rw-border-solid);
    transition: border-color 0.3s, opacity 0.3s;
    color: var(--rw-text);
}
.historial-card:hover        { border-color: var(--rw-orange); }
.historial-card.completado   { border-left: 4px solid var(--rw-success); }
.historial-card.pendiente    { border-left: 4px solid var(--rw-warning); }
.historial-card.cancelado    { border-left: 4px solid var(--rw-danger); opacity: 0.85; }
.historial-card.cancelado:hover { opacity: 1; }
.historial-card * { color: var(--rw-text); }
.historial-card .text-muted,
.historial-card small { color: var(--rw-muted) !important; }

/* ===== TRACKING CARDS ===== */
.tracking-card {
    background: var(--rw-navy2);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--rw-orange);
    transition: border-color 0.3s;
    color: var(--rw-text);
}
.tracking-card * { color: var(--rw-text); }
.tracking-card .text-muted,
.tracking-card small { color: var(--rw-muted) !important; }

.tracking-card-cancelado {
    background: var(--rw-navy2);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--rw-danger);
    opacity: 0.85;
    transition: opacity 0.3s;
    color: var(--rw-text);
}
.tracking-card-cancelado:hover { opacity: 1; }
.tracking-card-cancelado * { color: var(--rw-text); }
.tracking-card-cancelado .text-muted,
.tracking-card-cancelado small { color: var(--rw-muted) !important; }

/* ===== ESTADO BADGES ===== */
.estado-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.estado-pendiente   { background: var(--rw-warning);  color: #000 !important; }
.estado-vista       { background: var(--rw-info);     color: #fff !important; }
.estado-cotizada    { background: #8b5cf6;             color: #fff !important; }
.estado-aceptada    { background: var(--rw-success);  color: #fff !important; }
.estado-rechazada   { background: var(--rw-danger);   color: #fff !important; }
.estado-cancelada,
.estado-cancelado   { background: var(--rw-muted);    color: #fff !important; }

/* Badge rápido de cancelado */
.badge-cancelado {
    background: var(--rw-danger);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ===== MONTO BOX ===== */
.monto-box {
    background: var(--rw-navy);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.9rem;
    display: inline-block;
}
.monto-box .label {
    font-size: 0.65rem;
    color: var(--rw-muted) !important;
    display: block;
}
.monto-box .value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rw-orange) !important;
}

/* ===== BOTONES PANEL ===== */
.btn-panel-primary {
    background: var(--rw-orange);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.1rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
}
.btn-panel-primary:hover {
    background: var(--rw-orange-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--rw-orange-glow);
}

/* Alias Bootstrap sobrescritos */
.btn-primary {
    background: var(--rw-orange) !important;
    border-color: var(--rw-orange) !important;
    color: #fff !important;
    font-family: var(--font-body);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--rw-orange-dark) !important;
    border-color: var(--rw-orange-dark) !important;
    box-shadow: 0 0 0 3px var(--rw-orange-glow) !important;
}

.btn-outline-orange {
    background: transparent;
    border: 1px solid var(--rw-orange);
    color: var(--rw-orange);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.25s;
    cursor: pointer;
}
.btn-outline-orange:hover {
    background: var(--rw-orange);
    color: #fff;
}

/* Botones de acción en cards */
.btn-aceptar {
    background: var(--rw-success); color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 0.45rem 0.9rem;
    font-weight: 600; font-size: 0.82rem; cursor: pointer;
    transition: background 0.2s;
}
.btn-aceptar:hover { background: #059669; }

.btn-rechazar {
    background: var(--rw-danger); color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 0.45rem 0.9rem;
    font-weight: 600; font-size: 0.82rem; cursor: pointer;
    transition: background 0.2s;
}
.btn-rechazar:hover { background: #dc2626; }

.btn-cancelar {
    background: var(--rw-muted); color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 0.45rem 0.9rem;
    font-weight: 600; font-size: 0.82rem; cursor: pointer;
    transition: background 0.2s;
}
.btn-cancelar:hover { background: #4b5563; }

.btn-calificar {
    background: var(--rw-orange); color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 0.45rem 0.9rem;
    font-weight: 600; font-size: 0.82rem; cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.btn-calificar:hover {
    background: var(--rw-orange-dark);
    transform: translateY(-1px);
}

.btn-detalle-cancelacion {
    background: var(--rw-muted); color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 0.45rem 0.9rem;
    font-weight: 600; font-size: 0.82rem; cursor: pointer;
    transition: background 0.2s;
}
.btn-detalle-cancelacion:hover { background: #4b5563; }

/* ===== FORMULARIOS EN EL PANEL ===== */
.form-container {
    background: var(--rw-navy2);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--rw-border-solid);
    margin-bottom: 1.5rem;
}

.form-label {
    color: var(--rw-text2);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}
.form-label i { color: var(--rw-orange); font-size: 0.78rem; }

.form-control, .form-select {
    background: var(--rw-navy) !important;
    border: 1px solid var(--rw-border-solid) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--rw-text) !important;
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.65rem 1rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.form-control:focus, .form-select:focus {
    background: var(--rw-navy) !important;
    border-color: rgba(249,115,22,0.55) !important;
    box-shadow: 0 0 0 3px rgba(249,115,22,0.12) !important;
    color: var(--rw-text) !important;
    outline: none;
}
.form-control::placeholder { color: var(--rw-muted); }
.form-select option { background: var(--rw-navy2); color: var(--rw-text); }

/* ===== MODALES ===== */
.modal-content {
    background: var(--rw-navy2) !important;
    border: 1px solid var(--rw-border-solid) !important;
    border-radius: var(--radius-lg);
}
.modal-header, .modal-footer {
    border-color: var(--rw-border-solid) !important;
}
.modal-title { color: var(--rw-text) !important; }
.modal-body  { color: var(--rw-text); }
.modal-body .text-muted { color: var(--rw-muted) !important; }

/* Línea superior naranja en modal */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--rw-orange), transparent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: none;
}
.modal-content { position: relative; overflow: hidden; }

/* ===== ESTRELLAS DE CALIFICACIÓN ===== */
.rating-stars i.fas.fa-star  { color: var(--rw-warning); }
.rating-stars i.far.fa-star  { color: var(--rw-muted); }
.rating-stars i              { font-size: 0.9rem; margin: 0 0.1rem; }
.rating-modal i              { cursor: pointer; transition: transform 0.2s; }
.rating-modal i:hover        { transform: scale(1.15); }

/* ===== SERVICE CARDS (Dashboard) ===== */
.service-card {
    background: linear-gradient(135deg, var(--rw-navy2) 0%, var(--rw-navy) 100%);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    text-align: center;
    border: 1px solid rgba(249,115,22,0.1);
    cursor: pointer;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    height: 100%;
}
.service-card:hover {
    border-color: var(--rw-orange);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.service-card i {
    font-size: 2.25rem;
    color: var(--rw-orange);
    margin-bottom: 0.75rem;
    display: block;
}
.service-card h5 {
    color: var(--rw-text);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.service-card p {
    color: var(--rw-muted);
    font-size: 0.8rem;
    margin: 0;
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    background: var(--rw-navy2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--rw-border-solid);
}
.empty-state i {
    font-size: 2.5rem;
    color: var(--rw-muted);
    margin-bottom: 1rem;
    display: block;
}
.empty-state p {
    color: var(--rw-muted);
    margin-bottom: 1.25rem;
}

/* ===== SECTION HEADERS (dentro de las páginas) ===== */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.section-header h3,
.section-header h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rw-text);
    margin: 0;
}
.section-header a { color: var(--rw-orange); text-decoration: none; font-size: 0.85rem; }
.section-header a:hover { color: var(--rw-orange-light); }

/* ===== TOAST NOTIFICACIÓN ===== */
.toast-panel {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    min-width: 300px;
    animation: toastIn 0.3s var(--ease-expo);
}
@keyframes toastIn {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}
.toast-panel .toast-inner {
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.toast-panel.toast-success .toast-inner { background: #064e3b; color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.toast-panel.toast-error   .toast-inner { background: #450a0a; color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .welcome-card { padding: 1.25rem; }
    .welcome-card h2 { font-size: 1.2rem; }
    .stat-card { padding: 1rem; }
    .stat-card h3 { font-size: 1.5rem; }
    .panel-card, .cotizacion-card, .historial-card,
    .tracking-card, .tracking-card-cancelado { padding: 1rem; }
    .form-container { padding: 1.25rem; }
    .section-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .toast-panel { left: 1rem; right: 1rem; min-width: unset; }
}

@media (max-width: 576px) {
    .monto-box { display: block; margin-top: 0.5rem; }
    .btn-aceptar, .btn-rechazar, .btn-cancelar { width: 100%; margin-bottom: 0.25rem; }
}