/* ──────────────────────────────────────────────────────────────────
   comercial-forms.css — sistema de formularios full-page del módulo
   Comercial (cform-*). Global, no scoped, para reutilizar en las
   páginas de Contacto, Propuesta, Factura y Tarifa.
   Solo tokens Materio (var(--mt-*)). El header base viene de bandejas.css.
   ────────────────────────────────────────────────────────────────── */

/* ── Header extras ── */
.cform-head-left { display: flex; align-items: center; gap: 14px; }
.cform-back {
    width: 38px; height: 38px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mt-paper-bg); border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius); color: var(--mt-body-color);
    cursor: pointer; transition: border-color .15s, color .15s, transform .15s;
}
.cform-back:hover { color: var(--mt-primary); border-color: var(--mt-primary); transform: translateX(-2px); }

.cform-head-actions { display: flex; align-items: center; gap: 10px; }
.cform-btn-ghost {
    background: transparent; border: 1px solid var(--mt-border-color); color: var(--mt-body-color);
    border-radius: var(--mt-radius); padding: 9px 18px; font-family: var(--mt-font);
    font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.cform-btn-ghost:hover:not(:disabled) { background: var(--mt-gray-50); border-color: var(--mt-primary); }
.cform-btn-ghost:disabled { opacity: .6; cursor: not-allowed; }

/* ── Spinner / loading ── */
.cform-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px; color: var(--mt-muted-color); }
.cform-spin {
    width: 15px; height: 15px; border: 2px solid color-mix(in srgb, var(--mt-primary) 30%, transparent);
    border-top-color: var(--mt-primary); border-radius: 50%; display: inline-block; animation: cform-spin .8s linear infinite;
}
.cform-spin-lg { width: 30px; height: 30px; border-width: 3px; }
@keyframes cform-spin { to { transform: rotate(360deg); } }

/* ── Layout ── */
.cform-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px;
    max-width: 1160px; margin: 18px auto 0; padding: 0 4px;
}
.cform-layout--wide { max-width: 1280px; }
.cform-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cform-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; align-self: start; }

/* ── Cards ── */
.cform-card {
    background: var(--mt-paper-bg); border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius); box-shadow: var(--mt-shadow-xs);
    overflow: hidden; transition: border-color .18s;
}
.cform-card:hover { border-color: color-mix(in srgb, var(--mt-primary) 35%, var(--mt-border-color)); }
.cform-card-head {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 18px; border-bottom: 1px solid var(--mt-border-color);
}
.cform-card-ic {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--mt-radius);
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mt-primary) 14%, transparent);
    color: var(--mt-primary); font-size: .85rem;
}
.cform-card-head h2 { margin: 0; font-size: .98rem; font-weight: 600; color: var(--mt-heading-color); flex: 1; }
.cform-card-sub { font-size: .74rem; color: var(--mt-muted-color); text-transform: uppercase; letter-spacing: .04em; }
.cform-card-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }

/* ── Fields ── */
.cform-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.cform-label { font-size: .8rem; font-weight: 500; color: var(--mt-body-color); }
.cform-req { color: var(--mt-danger); }

.cform-input, .cform-select, .cform-textarea {
    width: 100%; background: var(--mt-gray-50); border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius); color: var(--mt-heading-color);
    padding: 9px 12px; font-family: var(--mt-font); font-size: .9rem; transition: border-color .15s, box-shadow .15s;
}
.cform-textarea { resize: vertical; min-height: 60px; }
.cform-input::placeholder, .cform-textarea::placeholder { color: var(--mt-muted-color); }
.cform-input:focus, .cform-select:focus, .cform-textarea:focus {
    outline: none; border-color: var(--mt-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-primary) 18%, transparent);
}
.cform-input--mono { font-family: var(--mt-font-mono, "Courier New", monospace); }
.cform-input-err { border-color: var(--mt-danger); }
.cform-error { font-size: .76rem; color: var(--mt-danger); }
.cform-hint { font-size: .76rem; color: var(--mt-muted-color); }

.cform-money { position: relative; display: flex; align-items: center; }
.cform-money-cur {
    position: absolute; left: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    color: var(--mt-muted-color); pointer-events: none;
}
.cform-money .cform-input { padding-left: 46px; }

/* ── Switch ── */
.cform-switch { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--mt-body-color); cursor: pointer; }
.cform-switch input { width: 16px; height: 16px; accent-color: var(--mt-primary); }

/* ── Preview / resumen ── */
.cform-pv-id { display: flex; align-items: center; gap: 12px; }
.cform-avatar {
    width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; font-weight: 700; color: var(--mt-primary);
    background: color-mix(in srgb, var(--mt-primary) 16%, transparent);
}
.cform-pv-name { font-size: 1.05rem; font-weight: 700; color: var(--mt-heading-color); line-height: 1.25; word-break: break-word; }
.cform-pv-name.is-empty { color: var(--mt-muted-color); font-weight: 500; font-style: italic; }
.cform-pv-title { font-size: 1.12rem; font-weight: 700; color: var(--mt-heading-color); line-height: 1.3; word-break: break-word; }
.cform-pv-title.is-empty { color: var(--mt-muted-color); font-weight: 500; font-style: italic; }

.cform-pv-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.cform-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600;
    background: var(--mt-gray-50); border: 1px solid var(--mt-border-color); color: var(--mt-body-color);
}
.cform-badge--val { font-family: var(--mt-font-mono, "Courier New", monospace); color: var(--mt-heading-color); }
.cform-badge--lead { background: color-mix(in srgb, #00cfe8 16%, transparent); border-color: transparent; color: #00cfe8; }
.cform-badge--prospecto { background: color-mix(in srgb, #ff9f43 16%, transparent); border-color: transparent; color: #ff9f43; }
.cform-badge--cliente_contacto { background: color-mix(in srgb, #28c76f 16%, transparent); border-color: transparent; color: #28c76f; }
.cform-badge--nueva, .cform-badge--borrador { background: color-mix(in srgb, #00cfe8 16%, transparent); border-color: transparent; color: #00cfe8; }
.cform-badge--en_progreso, .cform-badge--en_revision { background: color-mix(in srgb, #ff9f43 16%, transparent); border-color: transparent; color: #ff9f43; }
.cform-badge--propuesta_enviada, .cform-badge--enviada_cliente, .cform-badge--aprobada_interna { background: color-mix(in srgb, var(--mt-primary) 18%, transparent); border-color: transparent; color: var(--mt-primary); }
.cform-badge--ganada, .cform-badge--aceptada, .cform-badge--pagado, .cform-badge--cobrado { background: color-mix(in srgb, #28c76f 18%, transparent); border-color: transparent; color: #28c76f; }
.cform-badge--perdida, .cform-badge--rechazada_cliente, .cform-badge--vencido { background: color-mix(in srgb, var(--mt-danger) 16%, transparent); border-color: transparent; color: var(--mt-danger); }
.cform-badge--pendiente, .cform-badge--emitida { background: var(--mt-gray-50); color: var(--mt-body-color); }

.cform-pv-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.cform-pv-row { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--mt-body-color); }
.cform-pv-row i { width: 16px; text-align: center; color: var(--mt-muted-color); flex-shrink: 0; }
.cform-pv-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cform-wa {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
    color: #25d366; text-decoration: none; font-size: .85rem; font-weight: 600;
    border: 1px solid color-mix(in srgb, #25d366 35%, transparent); border-radius: var(--mt-radius);
    padding: 8px 12px; transition: background .15s;
}
.cform-wa:hover { background: color-mix(in srgb, #25d366 10%, transparent); }

/* ── Líneas (servicios de propuesta / factura) ── */
.cform-lines { display: flex; flex-direction: column; gap: 12px; }
.cform-line {
    border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius);
    background: var(--mt-gray-50); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
    transition: border-color .15s;
}
.cform-line:hover { border-color: color-mix(in srgb, var(--mt-primary) 30%, var(--mt-border-color)); }
.cform-line-top { display: flex; align-items: center; gap: 10px; }
.cform-line-num {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; font-size: .72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mt-primary) 14%, transparent); color: var(--mt-primary);
}
.cform-line-desc { flex: 1; }
.cform-line-del {
    width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--mt-border-color);
    background: var(--mt-paper-bg); color: var(--mt-muted-color); border-radius: 6px; cursor: pointer; font-size: .9rem;
}
.cform-line-del:hover { color: var(--mt-danger); border-color: var(--mt-danger); }
.cform-line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.cform-line-total { text-align: right; font-family: var(--mt-font-mono, "Courier New", monospace); font-weight: 700; color: var(--mt-heading-color); }
.cform-line-cell-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mt-muted-color); margin-bottom: 4px; display: block; }

.cform-add {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
    background: transparent; border: 1px dashed var(--mt-border-color); color: var(--mt-primary);
    border-radius: var(--mt-radius); padding: 9px 16px; font-family: var(--mt-font); font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cform-add:hover { border-color: var(--mt-primary); background: color-mix(in srgb, var(--mt-primary) 8%, transparent); }
.cform-lines-empty { padding: 18px; text-align: center; color: var(--mt-muted-color); font-size: .85rem; border: 1px dashed var(--mt-border-color); border-radius: var(--mt-radius); }

.cform-total-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-top: 1px solid var(--mt-border-color); background: var(--mt-gray-50);
}
.cform-total-bar span { font-size: .85rem; color: var(--mt-body-color); }
.cform-total-bar strong { font-size: 1.35rem; color: var(--mt-heading-color); font-family: var(--mt-font-mono, "Courier New", monospace); }

/* ── Pipeline stepper ── */
.cform-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cform-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.cform-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: -7px; width: 2px; background: var(--mt-border-color); }
.cform-step.is-done:not(:last-child)::before { background: #28c76f; }
.cform-step-dot {
    width: 28px; height: 28px; flex-shrink: 0; z-index: 1; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
    background: var(--mt-gray-50); border: 2px solid var(--mt-border-color); color: var(--mt-muted-color); transition: background-color .18s var(--mt-ease-out), border-color .18s var(--mt-ease-out), color .18s var(--mt-ease-out), box-shadow .18s var(--mt-ease-out), transform .18s var(--mt-ease-out), opacity .18s var(--mt-ease-out);
}
.cform-step-lbl { font-size: .85rem; color: var(--mt-muted-color); transition: color .18s; }
.cform-step.is-active .cform-step-dot { background: color-mix(in srgb, var(--mt-primary) 16%, transparent); border-color: var(--mt-primary); color: var(--mt-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mt-primary) 14%, transparent); }
.cform-step.is-active .cform-step-lbl { color: var(--mt-heading-color); font-weight: 600; }
.cform-step.is-done .cform-step-dot { background: #28c76f; border-color: #28c76f; color: #fff; }
.cform-step.is-done .cform-step-lbl { color: var(--mt-body-color); }

/* ── Contacto: grid de 2 tarjetas por fila ── */
.cform-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cform-field--half { max-width: calc(50% - 8px); }

/* ── Documento (tipo + número) ── */
.cform-doc { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.cform-doc-tipo { padding-left: 8px; padding-right: 4px; }

/* ── Teléfono con prefijo ── */
.cform-phone { position: relative; display: flex; align-items: center; }
.cform-phone-pre {
    position: absolute; left: 1px; top: 1px; bottom: 1px; width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 600; color: var(--mt-muted-color);
    background: color-mix(in srgb, var(--mt-border-color) 40%, transparent);
    border-right: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius) 0 0 var(--mt-radius); pointer-events: none;
}
.cform-phone .cform-input { padding-left: 56px; }

/* ── Bloque de empresa (información laboral) ── */
.cform-emp {
    border: 1px solid var(--mt-border-color); border-radius: var(--mt-radius);
    background: var(--mt-gray-50); padding: 14px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color .15s;
}
.cform-emp:hover { border-color: color-mix(in srgb, var(--mt-primary) 30%, var(--mt-border-color)); }
.cform-emp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cform-emp-star {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: transparent; border: 1px solid var(--mt-border-color); color: var(--mt-muted-color);
    border-radius: var(--mt-radius-pill, 999px); padding: 5px 12px; font-family: var(--mt-font);
    font-size: .76rem; font-weight: 600; transition: all .15s;
}
.cform-emp-star:hover { border-color: var(--mt-warning); color: var(--mt-warning); }
.cform-emp-star.is-on {
    background: color-mix(in srgb, var(--mt-warning) 16%, transparent);
    border-color: transparent; color: var(--mt-warning);
}
.cform-emp-libre { margin-top: 8px; }

/* ── Radios con punto de color (influencia / poder) ── */
.cform-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.cform-radio {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--mt-gray-50); border: 1px solid var(--mt-border-color); color: var(--mt-body-color);
    border-radius: var(--mt-radius); padding: 8px 14px; font-size: .82rem; font-weight: 500; transition: all .15s;
}
.cform-radio:hover { border-color: color-mix(in srgb, var(--mt-primary) 40%, var(--mt-border-color)); }
.cform-radio.is-sel { border-color: var(--mt-primary); color: var(--mt-heading-color); background: color-mix(in srgb, var(--mt-primary) 8%, transparent); }
.cform-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: var(--mt-muted-color); }
.cform-dot--alto, .cform-dot--alta { background: var(--mt-success); }
.cform-dot--medio, .cform-dot--media { background: var(--mt-warning); }
.cform-dot--bajo, .cform-dot--baja { background: var(--mt-danger); }

/* ── Chips de selección múltiple (intereses) ── */
.cform-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cform-chip {
    cursor: pointer; background: var(--mt-gray-50); border: 1px solid var(--mt-border-color);
    color: var(--mt-body-color); border-radius: var(--mt-radius-pill, 999px); padding: 6px 14px;
    font-family: var(--mt-font); font-size: .8rem; font-weight: 500; transition: all .15s;
}
.cform-chip:hover { border-color: var(--mt-primary); color: var(--mt-heading-color); }
.cform-chip.is-on {
    background: color-mix(in srgb, var(--mt-primary) 16%, transparent);
    border-color: transparent; color: var(--mt-primary); font-weight: 600;
}

/* ── Etiquetas (tags input) ── */
.cform-tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    background: var(--mt-gray-50); border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius); padding: 8px 10px; min-height: 40px;
}
.cform-tag {
    display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
    background: color-mix(in srgb, var(--mt-primary) 14%, transparent); color: var(--mt-primary);
    border-radius: var(--mt-radius); padding: 3px 4px 3px 10px;
}
.cform-tag button {
    border: none; background: transparent; color: inherit; cursor: pointer; padding: 0 4px;
    display: inline-flex; align-items: center; font-size: .7rem; opacity: .8;
}
.cform-tag button:hover { opacity: 1; }
.cform-tag-input { flex: 1; min-width: 120px; border: none; background: transparent; outline: none; color: var(--mt-heading-color); font-family: var(--mt-font); font-size: .85rem; }
.cform-tag-input::placeholder { color: var(--mt-muted-color); }

/* ── Consejo / nota obligatorios ── */
.cform-tip, .cform-reqnote { padding: 16px 18px; }
.cform-tip { background: color-mix(in srgb, var(--mt-primary) 7%, var(--mt-paper-bg)); border-color: color-mix(in srgb, var(--mt-primary) 30%, var(--mt-border-color)); }
.cform-tip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cform-tip-head h3 { margin: 0; font-size: .9rem; font-weight: 600; color: var(--mt-heading-color); }
.cform-tip-ic {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--mt-radius);
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem;
    background: color-mix(in srgb, var(--mt-primary) 16%, transparent); color: var(--mt-primary);
}
.cform-tip-ic--req { background: color-mix(in srgb, var(--mt-danger) 16%, transparent); color: var(--mt-danger); }
.cform-tip p, .cform-reqnote p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--mt-body-color); }

/* ── Mobile action bar ── */
.cform-mobilebar { display: none; }
@media (max-width: 1100px) {
    .cform-cards-2 { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
    .cform-layout { grid-template-columns: 1fr; }
    .cform-aside { position: static; }
    .cform-head-actions { display: none; }
    .cform-mobilebar {
        display: flex; gap: 10px; justify-content: flex-end;
        position: sticky; bottom: 0; margin-top: 16px; padding: 12px 4px;
        background: linear-gradient(to top, var(--mt-body-bg) 70%, transparent);
        z-index: 5;
    }
}
@media (max-width: 560px) {
    .cform-grid, .cform-grid-3 { grid-template-columns: 1fr; }
    .cform-field--half { max-width: 100%; }
    .cform-doc { grid-template-columns: 88px 1fr; }
}