/* conexiones-tareas.css -- la tarjeta de una tarea y sus hojas (public/conexiones-tareas.js; invariante 13 de CLAUDE.md). Cuarto Oscuro: SOLO tokens de cuarto-oscuro.css, ningun color, sombra ni
   duracion escritos a mano (paridad-cuarto-oscuro). Forma: pildora = se toca; 4 px = contenido (la tarjeta es contenido de la conversacion, como la del evento de Hilos); `--urge` solo para
   «Detener» y para un error. Sin animacion propia. Reusa las clases de conexiones.css (.cx-pil, .cx-marca, .cx-hora, .cx-lnk, .cx-err, .cx-p, .cx-lb, .cx-in). */

/* ---- la tarjeta dentro de la conversacion ---- */
.cx-tarea{ max-width:460px; padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra); outline:none; }
.cx-t-cab{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); min-height:20px; font-size:var(--t-meta); color:var(--apagado); }
.cx-t-rot{ min-width:0; overflow-wrap:anywhere; }
.cx-t-cab .cx-hora{ margin-left:auto; }
.cx-t-t{ display:flex; align-items:flex-start; gap:var(--e-2); margin:var(--e-2) 0 2px; font-size:var(--t-texto); font-weight:500; line-height:1.35; color:var(--tinta); overflow-wrap:anywhere; }
.cx-t-t svg{ flex:none; margin-top:3px; color:var(--medio); }
.cx-t-p{ margin:0 0 var(--e-2); font-size:var(--t-texto); line-height:1.5; color:var(--medio); overflow-wrap:anywhere; }
.cx-t-carga{ margin:var(--e-2) 0 0; color:var(--apagado); }
.cx-t-meta{ margin:var(--e-2) 0 0; font-size:var(--t-meta); line-height:1.4; color:var(--apagado); }
.cx-t-fechas{ list-style:none; margin:var(--e-2) 0; padding:0; }
.cx-t-f{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:32px; }
.cx-t-f:has(.cx-pil){ min-height:44px; }
.cx-t-p + .cx-t-fechas{ margin-top:0; }
.cx-t-fd{ min-width:0; color:var(--tinta); overflow-wrap:anywhere; }
.cx-t-sel .cx-t-fd{ font-weight:500; }
.cx-t-rec{ list-style:none; margin:var(--e-2) 0 0; padding:0; font-size:var(--t-meta); line-height:1.5; color:var(--medio); }
.cx-t-rec li{ position:relative; padding-left:var(--e-3); overflow-wrap:anywhere; }
.cx-t-rec li::before{ content:""; position:absolute; left:0; top:.6em; width:4px; height:4px; border-radius:var(--r-pildora); background:var(--punto); }
.cx-t-det{ margin-top:var(--e-2); font-size:var(--t-meta); color:var(--medio); }
.cx-t-det summary{ display:flex; align-items:center; min-height:32px; cursor:pointer; color:var(--medio); }
@media (pointer:coarse){ .cx-t-det summary{ min-height:44px; } }
.cx-t-ok{ display:flex; align-items:center; gap:var(--e-2); margin:var(--e-2) 0 0; font-size:var(--t-texto); color:var(--tinta); }
.cx-t-err{ margin:var(--e-2) 0 0; }
.cx-t-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }
.cx-pil-p{ color:var(--urge); }
.cx-t-ir{ display:block; min-height:44px; margin-top:var(--e-2); text-align:left; overflow-wrap:anywhere; }

/* ---- hojas: «Buscar una fecha» y «Responder yo» ---- */
.cxt-gar{ list-style:none; margin:0 0 var(--e-3); padding:0; display:flex; flex-direction:column; gap:var(--e-2); }
.cxt-gar li{ display:flex; align-items:flex-start; gap:var(--e-2); font-size:var(--t-texto); line-height:1.45; color:var(--medio); }
.cxt-gar svg{ flex:none; margin-top:3px; color:var(--tinta); }
.cxt-fs{ min-width:0; margin:0 0 var(--e-3); padding:0; border:0; }
.cxt-lg{ margin-bottom:var(--e-2); padding:0; font-size:var(--t-texto); color:var(--tinta); }
.cxt-ops{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.cxt-op{ position:relative; flex:1 1 90px; }
.cxt-op input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.cxt-op span{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 var(--e-3); border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-texto); text-align:center; }
.cxt-op input:checked + span{ background:var(--boton); color:var(--boton-t); }
.cxt-op input:focus-visible + span{ outline:2px solid var(--tinta); outline-offset:2px; }