/* TecnoElevador - Bucket Elevator CEMA 301/302 */
/* All classes prefixed with ec- */

/* Hero */
.ec-hero { background:linear-gradient(135deg,#001a4d,#062F87,#1a4a9f); color:#fff; padding:100px 30px 40px; text-align:center; margin-top:60px }
.ec-hero h1 { font-family:Oswald,sans-serif; font-size:36px; font-weight:400; margin:0 0 8px; text-transform:uppercase }
.ec-hero h1 span { color:#3B82F6; font-weight:500 }
.ec-hero p { max-width:700px; margin:0 auto 20px; font-size:14px; color:#cbd5e1; line-height:1.6 }
.ec-hero-stats { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; font-size:13px }
.ec-hero-stats span { background:rgba(255,255,255,0.1); padding:6px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.15) }
.ec-hero-stats strong { color:#3B82F6 }

/* Form grid */
.ec-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px }
.ec-form-group { display:flex; flex-direction:column }
.ec-form-group label { font-size:12px; font-weight:700; color:#1e293b; margin-bottom:3px }
.ec-form-group select, .ec-form-group input { padding:8px 10px; border:1px solid #cbd5e1; border-radius:5px; font-size:13px; font-family:inherit; background:#fff; color:#1e293b }
.ec-form-group select:focus, .ec-form-group input:focus { outline:none; border-color:#3B82F6; box-shadow:0 0 0 2px rgba(59,130,246,0.2) }
.ec-hint { font-size:10px; color:#94a3b8; margin-top:2px; min-height:14px }

/* Examples */
.ec-examples { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.ec-example-btn { padding:5px 12px; font-size:11px; border:1px solid #cbd5e1; border-radius:4px; background:#f8fafc; cursor:pointer; color:#1e293b; transition:all .15s }
.ec-example-btn:hover { border-color:#3B82F6; background:#eff6ff }

/* Lead */
.ec-lead { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px }
.ec-lead input { flex:1; min-width:120px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:5px; font-size:13px; font-family:inherit }
.ec-lead input:focus { outline:none; border-color:#3B82F6; box-shadow:0 0 0 2px rgba(59,130,246,0.2) }

/* Actions */
.ec-actions { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap }
.ec-action-btn { padding:9px 20px; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; font-family:inherit }
.ec-primary { background:#062F87; color:#fff }
.ec-primary:hover { background:#001a4d }
.ec-green { background:#16a34a; color:#fff }
.ec-green:hover { background:#15803d }
.ec-secondary { background:#f1f5f9; color:#1e293b; border:1px solid #cbd5e1 }
.ec-secondary:hover { background:#e2e8f0 }

/* KPI (uses global .kpi-bar + .ec-kpi-primary) */
.ec-kpi-primary { background:#062F87 !important; color:#fff !important }

/* Result grid */
.ec-result-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:16px }
.ec-result-card { background:#fff; border:1px solid #e2e8f0; border-radius:6px; padding:8px 10px; display:flex; flex-direction:column; font-size:12px }
.ec-label { color:#64748b; font-size:10px; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:2px }
.ec-value { color:#1e293b; font-weight:600; font-size:13px }

/* SVG container */
.ec-svg-container { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:16px; overflow:hidden }
.ec-svg-container svg { display:block; margin:0 auto; max-width:100%; height:auto }

/* Derivation */
.ec-derivation { margin-bottom:16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:0 }
.ec-derivation summary { padding:10px 14px; cursor:pointer; font-weight:600; font-size:13px; color:#062F87; display:flex; align-items:center; gap:6px }
.ec-derivation summary i { margin-right:6px }
.ec-derivation .derivation-content { padding:0 14px 14px; font-size:12px; color:#1e293b }
.ec-derivation h5 { margin:12px 0 4px; color:#062F87; font-size:12px; text-transform:uppercase }
.ec-derivation p { margin:4px 0; line-height:1.5 }

/* History */
.ec-history { display:none; background:#fff; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:16px; overflow:hidden }
.ec-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 }
.ec-history .history-close { background:none; border:none; font-size:20px; cursor:pointer; color:#64748b; padding:0 4px }
.ec-history .history-table { width:100%; border-collapse:collapse; font-size:12px }
.ec-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 }
.ec-history .history-table td { padding:8px 12px; border-bottom:1px solid #f1f5f9; color:#1e293b }
.ec-history .history-restore { padding:4px 10px; font-size:11px; background:#062F87; color:#fff; border:none; border-radius:4px; cursor:pointer }

/* 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 }

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

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

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