.resumen-comercial { margin: 32px 0; padding: 24px; border: 1px solid #4a405f; border-radius: 18px; background: linear-gradient(135deg, #211d32, #111925); }
.comercial-kicker { color: #bca5ff; font-size: .7rem; letter-spacing: .14em; font-weight: 750; margin: 0 0 8px; }
.comercial-cabecera { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.comercial-cabecera h2 { margin: 0; }
.comercial-cabecera button { width: auto; margin: 0; padding: 10px 14px; font-size: .85rem; }
.metricas-comerciales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.metrica-comercial { padding: 18px; background: #0d101bb3; border: 1px solid #3b3a51; border-radius: 12px; }
.metrica-comercial h3 { font-size: .8rem; color: #d0c9e2; font-weight: 550; margin: 0 0 12px; }
.metrica-comercial strong { display: block; font-size: 2.2rem; letter-spacing: -.04em; color: #efdeff; }
.metrica-comercial p { font-size: .75rem; margin-bottom: 0; }
.estados-comerciales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 22px 0 0; }
.estados-comerciales > div { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; border-bottom: 1px solid #343247; padding-bottom: 8px; }
.estados-comerciales dt { color: #bdb5d0; }
.estados-comerciales dd { margin: 0; font-weight: 750; }
.gestion-comercial { margin-top: 32px; padding-top: 28px; border-top: 1px solid #6d578a; }
.gestion-comercial h3 { font-size: 1.3rem; margin-top: 0; }
.gestion-comercial h4 { margin: 0 0 12px; font-size: 1.05rem; }
.gestion-comercial h5 { margin: 0 0 10px; font-size: .95rem; }
.comercial-formulario { padding: 22px; margin-top: 24px; border: 1px solid #343247; border-radius: 14px; background: #10131f; }
.comercial-aviso { padding: 12px 15px; font-size: .85rem; color: #e2cda7; background: #342b1d88; border-left: 3px solid #cba76b; border-radius: 4px; }
.gestion-comercial textarea { width: 100%; resize: vertical; padding: 13px; border: 1px solid #55536a; border-radius: 10px; background: #0d101b; color: #fff; font: inherit; line-height: 1.55; }
.comercial-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: .85rem; line-height: 1.55; }
.comercial-checkbox input { width: auto; flex: 0 0 auto; margin-top: 5px; accent-color: #c4a9ff; }
.versiones-comerciales { display: grid; gap: 12px; list-style: none; padding: 0; }
.comercial-version { padding: 16px; background: #191a2b; border: 1px solid #454058; border-radius: 12px; }
.comercial-version button { width: auto; padding: 9px 12px; margin: 8px 8px 0 0; font-size: .8rem; }
.comercial-version p { margin: 0; }
.comercial-tarea + .comercial-tarea { margin-top: 24px; padding-top: 24px; border-top: 1px solid #343247; }
.comercial-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.comercial-acciones button { width: auto; margin: 0; padding: 10px 14px; font-size: .85rem; }
@media (max-width: 620px) { .metricas-comerciales { grid-template-columns: 1fr; } .metrica-comercial { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; } .metrica-comercial strong { grid-row: span 2; align-self: center; } .metrica-comercial h3, .metrica-comercial p { margin: 0; } .estados-comerciales { grid-template-columns: 1fr 1fr; } .resumen-comercial, .comercial-formulario { padding: 16px; } }