/* Ficha del cliente (#/contacto/<id>): design-system/pages/crm.md «Ficha del cliente». También las piezas de Mis Pedidos
   que comparten la ficha, la conversación (tira y columna «Pedidos de …») y la hoja del pedido: tarjeta de pedido
   (.crm-pedido), barra de 5 pasos (.crm-pasos5), guía (.crm-guia) y línea de tiempo (.crm-tl). */

/* ---------- Ficha ---------- */
.crm-ficha-cab h2{font-size:17px}
.crm-ficha{padding-top:4px}
.crm-ficha-hero{display:flex;align-items:center;gap:14px;padding:12px 0 4px;min-width:0}
.crm-ficha-hero .crm-av-xl{flex:none}
.crm-ficha-hero-txt{min-width:0}
.crm-ficha-hero h1{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.15;overflow-wrap:anywhere}
.crm-ficha-hero p{font-size:14px;color:var(--suave);margin-top:2px}
.crm-ficha-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.crm-chip.crm-chip-32{height:32px;padding:0 12px;font-size:13.5px;max-width:100%}
button.crm-chip{cursor:pointer;position:relative}
button.crm-chip::after{content:"";position:absolute;inset:-6px 0}
button.crm-chip[aria-disabled="true"]{cursor:default}
.crm-acciones4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 4px}
.crm-acciones4>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:68px;padding:8px 4px;border-radius:14px;background:var(--campo);font-size:12.5px;font-weight:600;text-align:center;line-height:1.2;color:var(--texto);min-width:0;overflow-wrap:anywhere}
.crm-acciones4>button .crm-i{width:22px;height:22px;color:var(--acento-texto)}
.crm-acciones4>button[aria-disabled="true"]{opacity:.55}
@media (hover:hover){.crm-acciones4>button:not([aria-disabled="true"]):hover{background:var(--campo-hover)}}
.crm-sec{margin-top:22px}
.crm-sec-tit{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;min-height:32px}
.crm-sec-tit h3{font-size:17px;font-weight:750;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px;min-width:0}
.crm-sec-tit .crm-n{font-size:14px;color:var(--suave);font-weight:600}
.crm-sec-tit .crm-btn-texto{flex:none}
.crm-sec-vacio{font-size:15px}
.crm-pedidos{display:flex;flex-direction:column;gap:8px}
.crm-lista-g{background:var(--hoja);border-radius:14px;box-shadow:inset 0 0 0 1px var(--linea);overflow:hidden}
.crm-lg-fila{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 10px 8px 14px;font-size:15px;min-width:0}
.crm-lg-fila+.crm-lg-fila{box-shadow:inset 0 1px 0 var(--linea)}
.crm-lg-fila>.crm-i{color:var(--suave);flex:none}
.crm-lg-txt{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left;color:var(--texto)}
.crm-lg-txt>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-lg-txt small{display:block;font-size:13px;color:var(--suave);line-height:1.3}
.crm-lg-boton{min-height:44px;justify-content:center}
@media (hover:hover){.crm-lg-boton:hover>span{text-decoration:underline;text-underline-offset:2px}}
.crm-lg-fila .crm-der{margin-left:auto;font-size:13px;color:var(--suave);text-align:right;white-space:nowrap;flex:none}
.crm-lg-fila .crm-der small{display:block;font-size:12.5px;color:var(--suave)}
.crm-lg-fila .crm-der small.crm-acento-t{color:var(--acento-texto);font-weight:600}
.crm-lg-fila .crm-der small.crm-err{color:var(--error);font-weight:600}
.crm-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linea);border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--linea)}
.crm-campos>div{background:var(--hoja);padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.crm-campos span{font-size:12.5px;color:var(--suave)}
.crm-campos b{font-size:15px;font-weight:600;overflow-wrap:anywhere}
@container (min-width:640px){.crm-campos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.crm-nota-ficha{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--nota);box-shadow:inset 0 0 0 1px var(--nota-borde)}
.crm-nota-ficha span{font-size:12.5px;color:var(--suave)}
.crm-nota-ficha p{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-etiquetas{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crm-etiqueta{padding-right:2px!important;gap:2px}
.crm-quitar-et{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--suave);position:relative;flex:none}
.crm-quitar-et::after{content:"";position:absolute;inset:-8px -6px}
@media (hover:hover){.crm-quitar-et:hover{background:var(--campo-hover);color:var(--texto)}}
.crm-grupo-org{padding:14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--linea);background:var(--hoja)}
.crm-grupo-org+.crm-grupo-org{margin-top:8px}
.crm-fila-e{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.crm-fila-e>b{min-width:0;overflow-wrap:anywhere}
.crm-fila-e>.crm-suave{font-size:13.5px;flex:none}
.crm-grupo-lin{font-size:14px;margin-top:2px}
.crm-grupo-org .crm-barra{margin-top:10px}
.crm-grupo-pie{margin-top:6px;font-size:13.5px;align-items:center}
.crm-grupo-pie .crm-btn-texto{min-height:44px}
.crm-grupo-pie .crm-btn-texto[aria-disabled="true"]{opacity:.55}
.crm-tl-mas{margin-top:10px}
.crm-tl-boton{display:block;text-align:left;width:100%;color:inherit;font:inherit;padding:0;line-height:inherit}
@media (hover:hover){.crm-tl-boton:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--tenue)}}
.crm-editar-tit{font-size:14px;font-weight:650;color:var(--suave);margin:16px 0 4px}
.crm-editar-campo{display:flex;align-items:flex-end;gap:4px}
.crm-editar-campo>.crm-campo-g{flex:1;min-width:0}
.crm-editar-nuevo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.crm-unir-lista{margin-top:10px;min-height:120px}
.crm-texto{color:var(--texto);font-weight:600}
.crm-mp-error .crm-error-caja{margin:0}

/* ---------- Pedido de Mis Pedidos ---------- */
.crm-pedido{padding:14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--linea);background:var(--hoja);min-width:0}
.crm-pedido.crm-con-problema{box-shadow:inset 0 0 0 1px var(--error-borde)}
.crm-pedido.crm-aprobada{background:var(--ok-fondo);box-shadow:none}
.crm-ped-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.crm-ped-top>b,.crm-ped-folio{font-size:16px;font-weight:750;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--texto)}
.crm-ped-folio{min-height:32px;padding:0;position:relative;text-align:left}
.crm-ped-folio::after{content:"";position:absolute;inset:-6px -4px}
@media (hover:hover){.crm-ped-folio:hover{text-decoration:underline;text-underline-offset:3px}}
.crm-ped-lanz{font-size:14px;color:var(--suave)}
.crm-ped-top .crm-chip{margin-left:auto}
.crm-ped-lin{font-size:14px;color:var(--suave);margin-top:2px;overflow-wrap:anywhere}
.crm-ped-lin .crm-i{vertical-align:-2px}
.crm-ped-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.crm-ped-nums>div{display:flex;flex-direction:column;background:var(--campo);border-radius:10px;padding:8px 10px;min-width:0}
.crm-ped-nums span{font-size:12.5px;color:var(--suave)}
/* Las cifras no se cortan: bajan de tamaño con el ancho y, en lo más angosto, «Creada» o «Piezas» pasa abajo. */
.crm-ped-nums b{font-size:clamp(13px,4.9cqi,15.5px);white-space:nowrap;font-variant-numeric:tabular-nums}
@container (max-width:340px){.crm-ped-nums{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-ped-nums>div:last-child{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:baseline}}
.crm-ped-nums b.crm-err{color:var(--error)}
.crm-guia{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--campo);min-width:0}
.crm-guia.crm-guia-err{background:var(--error-fondo)}
.crm-paq-logo{height:18px;width:auto;flex:none;max-width:72px;object-fit:contain}
.crm-paq-txt{font-size:12.5px;font-weight:700;color:var(--suave);flex:none}
.crm-guia-txt{flex:1;min-width:0;font-size:13.5px;line-height:1.3;display:flex;flex-direction:column}
.crm-guia-txt b{display:block;font:600 13.5px/1.35 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-guia-txt small{font-size:12.5px;color:var(--suave)}
.crm-guia .crm-btn{flex:none}
.crm-ped-acc{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.crm-pasos5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-top:12px;list-style:none}
.crm-pasos5 li{display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.2;color:var(--suave);text-align:center;min-width:0;overflow-wrap:break-word;hyphens:manual}
.crm-pasos5 li::before{content:"";height:6px;border-radius:3px;background:var(--campo-hover)}
.crm-pasos5 li.crm-hecho::before{background:var(--ok)}
.crm-pasos5 li.crm-actual::before{background:var(--acento-relleno)}
.crm-pasos5 li.crm-actual{color:var(--texto);font-weight:650}
.crm-pasos5 li.crm-problema::before{background:var(--error)}
.crm-pasos5 li.crm-problema{color:var(--error);font-weight:650}
.crm-pasos5-cap{display:none;font-size:13px;margin-top:6px;color:var(--suave)}
.crm-pasos5-cap b{color:var(--texto);font-weight:650}
.crm-pasos5-cap b.crm-err{color:var(--error)}
/* Angosto: solo las barras y, abajo, «Paso N de 5: …» (los nombres no se parten a media palabra). */
.crm-pasos5 li{overflow-wrap:normal;word-break:keep-all;hyphens:none}
@container (max-width:380px){.crm-pasos5 li{font-size:0;gap:0}.crm-pasos5-cap{display:block}}

/* ---------- Línea de tiempo ---------- */
.crm-tl{position:relative;padding-left:22px;list-style:none}
.crm-tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--linea)}
.crm-tl li{position:relative;padding:6px 0;font-size:14.5px;overflow-wrap:anywhere}
.crm-tl li::before{content:"";position:absolute;left:-20px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--hoja);box-shadow:inset 0 0 0 2px var(--tenue)}
.crm-tl li.crm-ok::before{box-shadow:none;background:var(--ok)}
.crm-tl li.crm-err::before{box-shadow:none;background:var(--error)}
.crm-tl li.crm-ac::before{box-shadow:none;background:var(--acento-relleno)}
.crm-tl small{display:block;font-size:12.5px;color:var(--suave)}

/* ---------- Hoja del pedido ---------- */
.crm-hoja-ped .crm-ped-nums{margin-top:10px}
.crm-hoja-ped-quien{margin:0 0 4px;color:var(--texto);font-size:14.5px}
.crm-hoja-ped .crm-sec{margin-top:18px}
.crm-hoja-ped .crm-sec-tit h3{font-size:15.5px}
.crm-hoja-ped-acc{margin-top:16px}
.crm-hoja-ped .crm-pasos5-cap{display:block}

@media (min-width:1000px){
  .crm-ficha{padding:4px 24px 32px}
}