/* ============================================================================
   Por confirmar: lo que Claude dejo y una persona confirma (conector de Claude F4; tablero 6 y 7 del lienzo aprobado por Daniel).
   Solo tokens de cuarto-oscuro.css: ningun color, sombra ni duracion escritos a mano (paridad-cuarto-oscuro). Forma: pildora = se toca; contenido a 4 px.
   Sin animar: es una pantalla que se toca varias veces al dia. El acomodo se decide por el espacio de la PAGINA (container query), no por la ventana:
   con el chat de Xarpie abierto al CRM le tocan ~420 px aunque la ventana mida 1280.
   ============================================================================ */
.cf{ max-width:1120px; container-type:inline-size; }
.main > #view:has(.cf){ flex:0 1 auto; }
.cf-cols{ display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:var(--e-7); margin-top:var(--e-5); align-items:start; }
.cf-lista{ display:flex; flex-direction:column; gap:var(--e-1); }
.cf-item{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; min-height:56px; padding:var(--e-3); border:0; border-radius:var(--r); background:transparent; font:inherit; text-align:left; color:inherit; cursor:pointer; }
@media (hover:hover){ .cf-item:hover{ background:var(--tinte-toque); } }
.cf-item.abierta{ background:var(--tinte-toque); }
.cf-item-t{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.cf-item-s{ font-size:var(--t-meta); color:var(--medio); }
.cf-quien{ font-size:var(--t-meta); color:var(--apagado); }
.cf-h{ margin:var(--e-2) 0 0; font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; color:var(--tinta); }
.cf-res{ margin:var(--e-2) 0 0; font-size:var(--t-texto); color:var(--medio); }
.cf-campos{ margin:var(--e-5) 0 0; display:flex; flex-direction:column; gap:var(--e-3); }
.cf-campo{ display:grid; grid-template-columns:160px minmax(0,1fr); gap:var(--e-4); }
.cf-campo dt{ font-size:var(--t-meta); color:var(--apagado); }
.cf-campo dd{ margin:0; font-size:var(--t-texto); color:var(--tinta); overflow-wrap:anywhere; }
.cf-aviso{ margin:var(--e-4) 0 0; font-size:var(--t-texto); line-height:1.5; color:var(--tinta); }
.cf-nota{ margin:var(--e-4) 0 0; font-size:var(--t-meta); color:var(--medio); }
.cf-acc{ display:flex; flex-wrap:wrap; gap:var(--e-3); margin-top:var(--e-5); }
@container (max-width:640px){
  .cf-cols{ grid-template-columns:minmax(0,1fr); gap:var(--e-5); }
  .cf-campo{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .cf-acc .btn{ flex:1; min-height:44px; }
}