/* ==========================================================================
   AGROTECH CRM - SIMULADORES.CSS (Versión Optimizada y Completa)
   ========================================================================== */

/* ---------------------------------------------------
   1. CONTENEDOR GENERAL
--------------------------------------------------- */
.mockup-container { width: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }

/* ---------------------------------------------------
   2. SIMULADOR: VISOR DE PDF (PRESUPUESTOS)
--------------------------------------------------- */
.pdf-viewer-container { width: 100%; max-width: 780px; margin: 0 auto; }
.pdf-viewer-bg { background-color: #525659; width: 100%; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0, 13, 88, 0.4); padding: 20px 15px; position: relative; max-height: 550px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #888 #3a3d40; }
.pdf-viewer-bg::-webkit-scrollbar { width: 6px; }
.pdf-viewer-bg::-webkit-scrollbar-track { background: #3a3d40; border-radius: 0 12px 12px 0; }
.pdf-viewer-bg::-webkit-scrollbar-thumb { background-color: #777; border-radius: 10px; }
.pdf-floating-btn { position: sticky; top: 0; float: right; background: #25D366; color: white; border: none; padding: 8px 16px; border-radius: 50px; font-size: 0.75rem; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 10; cursor: pointer; margin-bottom: 10px; animation: pulse-green 2s infinite; }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
.pdf-a4-sheet { background: white; width: 100%; max-width: 720px; margin: 0 auto; padding: 25px 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #2b2b2b; line-height: 1.35; }
.pdf-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000D58; padding-bottom: 10px; margin-bottom: 15px; }
.pdf-logo { max-width: 110px; max-height: 45px; object-fit: contain; background-color: #f5f5f5; padding: 4px; border-radius: 4px; }
.pdf-company-info { text-align: right; font-size: 0.62rem; color: #444; }
.pdf-doc-title { color: #000D58; font-size: 1.25rem; font-weight: 900; margin-bottom: 3px; letter-spacing: 0.5px; }
.pdf-badge-dolar { background: #e8f5e9; color: #155724; border: 1px solid #c3e6cb; padding: 3px 6px; border-radius: 4px; font-weight: bold; display: inline-block; margin-top: 4px; font-size: 0.58rem; }
.pdf-data-boxes { display: flex; gap: 15px; margin-bottom: 15px; }
.pdf-data-box { flex: 1; background: #f8f9fa; padding: 10px 12px; border-radius: 5px; border: 1px solid #eaeaea; font-size: 0.62rem; }
.pdf-data-box h3 { margin-top: 0; color: #000D58; font-size: 0.68rem; border-bottom: 1px solid #ddd; padding-bottom: 3px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.pdf-doc-line { margin-bottom: 3px; }
.pdf-doc-line strong { color: #555; }
.pdf-table, .pdf-table-finan { width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 0.62rem; }
.pdf-table th, .pdf-table-finan th { background-color: #000D58; color: #F7FF4D; padding: 6px 8px; text-align: left; font-weight: 600; }
.pdf-table td, .pdf-table-finan td { padding: 6px 8px; border-bottom: 1px solid #eee; vertical-align: middle; }
.pdf-text-muted { display: block; font-size: 0.55rem; color: #666; font-style: italic; margin-top: 2px; }
.pdf-totals-wrapper { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.pdf-totals-box { width: 200px; }
.pdf-total-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.65rem; color: #444; }
.pdf-final-total { font-size: 0.8rem; font-weight: bold; color: #000D58; border-top: 1.5px solid #000D58; padding-top: 6px; margin-top: 3px; }
.pdf-section-title { font-size: 0.72rem; color: #000D58; margin-bottom: 8px; border-bottom: 2px solid #F7FF4D; display: inline-block; font-weight: bold; text-transform: uppercase; letter-spacing: 0.3px; }
.pdf-excel-summary { display: flex; gap: 8px; margin-bottom: 12px; background: #eef2f5; padding: 8px; border-radius: 4px; font-size: 0.58rem; }
.pdf-summary-item { flex: 1; padding: 4px; border-right: 1px solid #cbd5e1; text-align: center; }
.pdf-summary-item:last-child { border-right: none; }
.pdf-summary-item strong { display: block; font-size: 0.78rem; color: #000D58; margin-top: 2px; }
.pdf-highlight-green { background: #e8f5e9; border: 1px solid #c3e6cb; border-radius: 4px; }
.pdf-tfoot-total td { background-color: #eef2f5; font-weight: bold; color: #000D58; font-size: 0.68rem; text-align: right; }

/* ---------------------------------------------------
   3. SIMULADOR: CELULAR PWA (Servicio a Campo)
--------------------------------------------------- */
.fake-phone { width: 300px; height: 600px; background: #ffffff; border: 12px solid #1f2937; border-radius: 40px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.phone-status-bar { display: flex; justify-content: space-between; padding: 12px 20px; font-size: 0.75rem; font-weight: 600; background: #f8f9fa; color: #1f2937; }
.phone-header { background: #000D58; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.9rem; }
.switch-wifi { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch-wifi input { opacity: 0; width: 0; height: 0; }
.slider-toggle { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #28a745; transition: .4s; border-radius: 34px; }
.slider-toggle:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider-toggle { background-color: #28a745; }
input:not(:checked) + .slider-toggle { background-color: #dc3545; }
input:not(:checked) + .slider-toggle:before { transform: translateX(18px); }
.phone-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 15px; }
.offline-warning { background: #dc3545; color: white; text-align: center; padding: 8px; font-size: 0.75rem; font-weight: bold; border-radius: 6px; opacity: 0; transition: opacity 0.3s; }
.offline-warning.show { opacity: 1; }
.fake-input-group label { font-size: 0.75rem; color: #6b7280; font-weight: 600; }
.fake-input { background: #f0f4f8; padding: 10px; border-radius: 6px; font-size: 0.85rem; color: #1f2937; margin-top: 5px; border: 1px solid #e5e7eb; }
.fake-signature-box { height: 100px; border: 2px dashed #ccc; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 0.8rem; font-family: 'Brush Script MT', cursive; }
.ui-btn-success { background: #28a745; color: white; border: none; padding: 12px; border-radius: 8px; font-weight: bold; margin-top: auto; cursor: pointer; transition: background 0.3s; }

/* ---------------------------------------------------
   4. SIMULADOR: DASHBOARD GERENCIAL (Dark Mode)
--------------------------------------------------- */
.fake-window { width: 100%; border-radius: 16px; padding: 25px; transition: transform 0.3s ease; }
.dark-mockup { max-width: 500px; }
.dark-ui { background: rgba(11, 17, 48, 0.95); border-color: rgba(255,255,255,0.1); box-shadow: 0 25px 50px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); }
.dark-ui:hover { transform: translateY(-5px) scale(1.02); }
.dark-header { color: white; font-size: 1.1rem; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; margin-bottom: 20px; display: flex; align-items: center; }
.dark-widgets { display: flex; gap: 15px; margin-bottom: 25px; }
.widget { flex: 1; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; }
.widget-title { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }
.widget-value { font-size: 1.8rem; font-weight: 900; margin: 5px 0 10px; }
.text-yellow { color: #F7FF4D !important; text-shadow: 0 0 10px rgba(247, 255, 77, 0.3); }
.text-green { color: #28a745 !important; }
.fake-progress-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.fake-progress-bar .fill.green { background: #28a745; }
.fake-progress-bar .fill.yellow { background: #F7FF4D; }
.dark-table-skeleton { display: flex; flex-direction: column; gap: 10px; }
.skeleton-row { height: 40px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; animation: shimmer 2s infinite linear; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------------------------------------------------
   5. RESPONSIVE DESIGN (Móviles) Generales
--------------------------------------------------- */
@media (max-width: 768px) {
    .pdf-viewer-bg { padding: 15px 10px; }
    .pdf-a4-sheet { padding: 15px 20px; }
    .pdf-header { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    .pdf-company-info { text-align: center; }
    .pdf-data-boxes { flex-direction: column; gap: 8px; }
    .pdf-excel-summary { flex-direction: column; }
    .pdf-summary-item { border-right: none; border-bottom: 1px solid #ccc; padding-bottom: 6px; }
    .pdf-summary-item:last-child { border-bottom: none; }
    .fake-phone { width: 280px; }
}

/* ---------------------------------------------------
   6. SIMULADOR: TABLERO DE OBJETIVOS Y METAS
--------------------------------------------------- */
.tarjeta-kpi-sim { background: #ffffff; padding: 12px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid #e9ecef; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.borde-top-sim { position: absolute; top: 0; left: 0; width: 100%; height: 4px; }
.kpi-label-sim { font-size: 0.65rem; color: #6c757d; font-weight: 700; text-transform: uppercase; margin-top: 5px; margin-bottom: 3px; }
.kpi-valor-sim { font-size: 1.25rem; color: #000D58; line-height: 1.2; margin-bottom: 3px; }
.kpi-info-sim { font-size: 0.6rem; color: #999; font-weight: 600; }
.tarjeta-meta-sim { background: #fdfdfd; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px 15px; transition: transform 0.2s; }
.meta-header-sim { display: flex; flex-direction: column; margin-bottom: 10px; }
.meta-titulo-sim { font-size: 0.65rem; color: #6c757d; font-weight: bold; text-transform: uppercase; margin-bottom: 3px; }
.meta-numeros-sim { font-size: 0.75rem; color: #333; }
.barra-fondo-sim { width: 100%; height: 10px; background-color: #e9ecef; border-radius: 10px; position: relative; margin-bottom: 8px; }
.barra-relleno-sim { height: 100%; border-radius: 10px; transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.bandera-nivel-sim { position: absolute; top: 0; height: 100%; z-index: 2; }
.bandera-nivel-sim span { position: absolute; top: -16px; left: -8px; font-size: 11px; }
.meta-mensaje-sim { font-size: 0.65rem; font-weight: bold; text-align: center; margin-top: 5px; }

@media (max-width: 576px) { 
    .tarjeta-kpi-sim { padding: 10px; } 
    .kpi-valor-sim { font-size: 1.1rem; } 
}

/* ---------------------------------------------------
   7. SCROLL INTERNO PARA PANELES
--------------------------------------------------- */
.dashboard-scroll-bg { max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b0b0b0 #f0f4f8; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.dashboard-scroll-bg::-webkit-scrollbar { width: 6px; }
.dashboard-scroll-bg::-webkit-scrollbar-track { background: #f0f4f8; border-radius: 0 0 12px 0; }
.dashboard-scroll-bg::-webkit-scrollbar-thumb { background-color: #b0b0b0; border-radius: 10px; }

/* ---------------------------------------------------
   8. SIMULADOR DE VENTAS 360 (PC MOCKUP)
--------------------------------------------------- */
.pc-window-mockup { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.pc-window-mockup:hover { transform: translateY(-5px); }

.pc-window-body { min-height: 530px; display: flex; flex-direction: column; }
.pc-tab-pane { flex: 1; width: 100%; }

.btn-pc-tab { position: relative; overflow: hidden; }
.btn-pc-tab:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.8) !important; color: #ffffff !important; }
.btn-pc-tab.active { background: rgba(255, 255, 255, 0.15) !important; color: #F7FF4D !important; border-color: #F7FF4D !important; box-shadow: 0 0 10px rgba(247, 255, 77, 0.15); }

.item-catalogo-fake { transition: all 0.2s ease-in-out; }
.item-catalogo-fake:hover { background: #f0f4f8 !important; transform: translateX(5px); border-color: #000D58 !important; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }

@media (max-width: 768px) {
    .pc-window-header { flex-direction: column; gap: 12px; align-items: flex-start !important; }
    .pc-tabs-navigation { flex-wrap: wrap; width: 100%; justify-content: stretch; }
    .btn-pc-tab { flex: 1; text-align: center; min-width: 100%; margin-bottom: 4px; }
    #mini-modal-catalogo-sim { width: 90% !important; left: 5% !important; }
    #simulador-cotizador-scroll { max-height: 500px; padding: 10px !important; }
    .pc-window-body { min-height: auto; } 
}

/* ---------------------------------------------------
   9. SIMULADOR KANBAN (MIS VENTAS CRM)
--------------------------------------------------- */
.sim-kanban-scroll-area::-webkit-scrollbar { height: 8px; }
.sim-kanban-scroll-area::-webkit-scrollbar-track { background: #e2e4e9; border-radius: 10px; }
.sim-kanban-scroll-area::-webkit-scrollbar-thumb { background-color: #a0a0a0; border-radius: 10px; }

.sim-k-col-body::-webkit-scrollbar { width: 6px; }
.sim-k-col-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

.sim-k-card:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 6px 15px rgba(0,0,0,0.1) !important; border-color: #6f42c1; }

.sim-panel-abierto { right: 0 !important; }