/* TecnoDrag - Martin Tools */
.dc-hero { background:linear-gradient(135deg,#001a4d,#062F87,#1a4a9f); color:#fff; padding:60px 30px 40px; text-align:center; border-bottom:4px solid #3B82F6; margin-top:100px }
.dc-hero h1 { font-family:'Oswald',sans-serif; font-size:36px; font-weight:500; margin:0 0 8px }
.dc-hero h1 span { color:#3B82F6 }
.dc-hero p { font-size:14px; color:rgba(255,255,255,0.8); max-width:700px; margin:0 auto 16px }
.dc-hero .dc-hero-stats { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,0.7) }
.dc-hero .dc-hero-stats span { white-space:nowrap }
.dc-hero .dc-hero-stats strong { color:#fff }

.container { max-width:1100px; margin:0 auto; padding:30px 20px 150px }

.dc-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:20px; margin-bottom:20px }
.dc-form-group { display:flex; flex-direction:column }
.dc-form-group label { font-size:12px; font-weight:700; color:#1e293b; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.3px }
.dc-form-group select,.dc-form-group input[type=number] { padding:6px 10px; border:1px solid #cbd5e1; border-radius:4px; font-size:13px; font-family:Roboto,sans-serif; background:#fff; color:#1e293b }
.dc-form-group select:focus,.dc-form-group input:focus { border-color:#3B82F6; outline:none; box-shadow:0 0 0 2px rgba(59,130,246,0.2) }
.dc-form-group .dc-hint { font-size:10px; color:#94a3b8; margin-top:2px }

.dc-examples { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px }
.dc-example-btn { padding:6px 14px; font-size:11px; font-weight:700; border:1px solid #cbd5e1; background:#fff; border-radius:4px; cursor:pointer; color:#1e293b; transition:all 0.15s }
.dc-example-btn:hover { background:#062F87; color:#fff; border-color:#062F87 }

.dc-lead { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; padding:12px; background:#fff; border:1px solid #e2e8f0; border-radius:6px }
.dc-lead input { flex:1; min-width:120px; padding:6px 10px; border:1px solid #cbd5e1; border-radius:4px; font-size:13px; font-family:Roboto,sans-serif }
.dc-lead input:focus { border-color:#3B82F6; outline:none }

.dc-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px }
.dc-action-btn { padding:8px 20px; font-size:13px; font-weight:700; border:none; border-radius:6px; cursor:pointer; transition:all 0.15s; font-family:Roboto,sans-serif }
.dc-action-btn.dc-primary { background:#062F87; color:#fff }
.dc-action-btn.dc-primary:hover { background:#001a4d }
.dc-action-btn.dc-secondary { background:#f1f5f9; color:#1e293b; border:1px solid #cbd5e1 }
.dc-action-btn.dc-secondary:hover { background:#e2e8f0 }
.dc-action-btn.dc-danger { background:#dc2626; color:#fff }
.dc-action-btn.dc-danger:hover { background:#b91c1c }
.dc-action-btn.dc-green { background:#16a34a; color:#fff }
.dc-action-btn.dc-green:hover { background:#15803d }

/* KPI */
.dc-kpi-primary { background:#062F87 !important; color:#fff !important }

/* Results */
.dc-result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px }
.dc-result-card { background:#fff; border:1px solid #e2e8f0; border-radius:6px; padding:12px; display:flex; flex-direction:column }
.dc-result-card .dc-label { font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:2px }
.dc-result-card .dc-value { font-size:16px; font-weight:700; color:#1e293b }

/* Alerts */
.alerts-box { background:#fef2f2; border:1px solid #fecaca; border-radius:6px; padding:12px 16px; margin-bottom:16px }
.alert-item { font-size:12px; color:#dc2626; padding:4px 0; display:flex; align-items:center; gap:6px }

/* SVG */
.dc-svg-wrap { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:16px; margin-top:16px; text-align:center }
.dc-svg-wrap svg { max-width:100%; height:auto }

/* Derivation */
.dc-derivation { background:#fff; border:1px solid #e2e8f0; border-radius:6px; padding:12px 16px; margin-top:16px }
.dc-derivation summary { cursor:pointer; font-weight:700; font-size:14px; color:#062F87; padding:4px 0 }
.dc-derivation summary i { margin-right:6px }
.dc-derivation .derivation-content { padding-top:12px; font-size:12px; color:#1e293b }
.dc-derivation h5 { margin:12px 0 4px; color:#062F87; font-size:12px; text-transform:uppercase }
.dc-derivation p { margin:4px 0; line-height:1.5 }

/* History panel */
.dc-history { display:none; background:#fff; border:1px solid #e2e8f0; border-radius:8px; margin-top:16px; overflow:hidden }
.dc-history .history-header { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:#f1f5f9; border-bottom:1px solid #e2e8f0; font-size:13px }
.dc-history .history-close { background:none; border:none; font-size:20px; cursor:pointer; color:#64748b; padding:0 4px }
.dc-history .history-table { width:100%; border-collapse:collapse; font-size:12px }
.dc-history .history-table th { text-align:left; padding:8px 12px; background:#f8fafc; border-bottom:1px solid #e2e8f0; color:#64748b; text-transform:uppercase; font-size:10px; letter-spacing:0.3px }
.dc-history .history-table td { padding:8px 12px; border-bottom:1px solid #f1f5f9; color:#1e293b }
.dc-history .history-restore { padding:4px 10px; font-size:11px; background:#062F87; color:#fff; border:none; border-radius:4px; cursor:pointer }

/* Chain Detail Section */
.dg-chain-detail { margin-top:16px }
.dg-section-title { font-size:15px; font-weight:700; color:#062F87; margin-bottom:10px; padding-bottom:4px; border-bottom:2px solid #3B82F6 }
.dg-section-title i { margin-right:6px }
.dg-chain-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px }
.dg-chain-param { background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:10px 12px; display:flex; flex-direction:column }
.dg-chain-label { font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:2px }
.dg-chain-val { font-size:15px; font-weight:700; color:#1e293b }
.dg-chain-fs { background:#f0fdf4; border-color:#86efac }
.dg-chain-fs .dg-chain-val { font-size:17px }
.badge-ok { display:inline-block; padding:0 6px; font-size:9px; border-radius:3px; background:#16a34a; color:#fff; vertical-align:middle; margin-left:4px }
.badge-fail { display:inline-block; padding:0 6px; font-size:9px; border-radius:3px; background:#dc2626; color:#fff; vertical-align:middle; margin-left:4px }
.badge-auto { display:inline-block; padding:0 6px; font-size:9px; border-radius:3px; background:#3B82F6; color:#fff; vertical-align:middle; margin-left:4px }
.alert-info { background:rgba(59,130,246,0.1); border-left:3px solid #3B82F6; color:var(--text) }

/* CEMA Recommendation Panel */
.dg-recs { background:#f0f7ff; border:1px solid #bfdbfe; border-radius:8px; padding:12px 16px; margin-bottom:16px }
.dg-recs-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#1e40af; margin-bottom:8px }
.dg-recs-title i { margin-right:6px; color:#3b82f6 }
.dg-recs-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.dg-recs-item { display:flex; justify-content:space-between; align-items:center; padding:4px 8px; background:#fff; border-radius:4px; font-size:12px }
.dg-recs-label { color:#475569; font-weight:500 }
.dg-recs-val { color:#062F87; font-weight:700 }
.dg-recs-val.rec-ok { color:#16a34a }
.dg-recs-val.rec-warn { color:#dc2626 }

/* Power Breakdown Section */
.dg-power-section { margin-top:16px }
.dg-power-grid { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:12px }
.dg-power-card { flex:1; min-width:140px; max-width:220px; text-align:center; padding:16px 12px; border-radius:8px }
.dg-power-empty { background:#eff6ff; border:2px solid #3B82F6 }
.dg-power-loaded { background:#fefce8; border:2px solid #eab308 }
.dg-power-total { background:#f0fdf4; border:2px solid #22c55e }
.dg-power-plus, .dg-power-eq { font-size:20px; color:#94a3b8; flex-shrink:0 }
.dg-power-label { font-size:10px; text-transform:uppercase; letter-spacing:0.3px; color:#64748b; margin-bottom:6px }
.dg-power-main { font-size:20px; font-weight:800; color:#1e293b }
.dg-power-sub { font-size:11px; color:#94a3b8; margin-top:4px }

/* Motor Section */
.dg-motor-section { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; padding:14px 18px; margin-top:8px }
.dg-motor-row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px }
.dg-motor-label { color:#64748b; font-weight:500 }
.dg-motor-val { color:#062F87; font-weight:700 }

/* Sprocket Design Section */
.dc-sprocket-section { margin-top:16px }
.dg-spk-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px }
.dg-spk-card { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:14px; font-size:12px }
.dg-spk-card h4 { font-size:13px; font-weight:700; color:#062F87; margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid #e2e8f0 }
.dg-spk-row { display:flex; justify-content:space-between; padding:3px 0; font-size:12px }
.dg-spk-label { color:#64748b }
.dg-spk-val { color:#1e293b; font-weight:600 }
.dg-spk-note { font-size:10px; color:#94a3b8; margin-top:6px; font-style:italic }
.dg-spk-vis { margin-top:10px; text-align:center; padding:12px; background:#f8fafc; border-radius:6px; font-family:'Courier New',monospace; font-size:11px; line-height:1.4; color:#1e293b; white-space:pre; overflow-x:auto }
.dg-spk-vis-circle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:3px solid #3b82f6; background:#fff; font-size:9px; font-weight:700; color:#1e293b; margin:0 4px }
.dg-spk-arrow { display:inline-block; font-size:18px; color:#94a3b8; margin:0 8px; vertical-align:middle }

/* Error card */
.error-card { background:#fef2f2; border:1px solid #fecaca; border-radius:6px; padding:16px; color:#dc2626; font-size:14px; display:flex; align-items:center; gap:8px }

/* @media print */
@media print { body > *:not(#print-report) { display:none !important; } }

/* Responsive */
@media (max-width:860px) {
  .dc-form-grid { grid-template-columns:1fr }
  .dc-result-grid { grid-template-columns:1fr 1fr }
  .dc-hero { margin-top:80px; padding:40px 20px 30px }
  .dc-hero h1 { font-size:28px }
  .dc-lead { flex-direction:column }
  .dc-lead input { min-width:auto }
}
@media (max-width:480px) {
  .dc-result-grid { grid-template-columns:1fr }
}