/* Tarjetas de Oportunidades y detalle de cada prospecto: cabecera con el tipo de aviso, etiquetas, "lo principal", datos,
   mensaje editable, acciones, "Marcá cómo va" y "¿Qué tal es?". Colores, sombras y casi todos los radios salen de tokens.css;
   quedan literales los de 12 px (datos medidos) y 18 px (tarjeta en celular), que no tienen token equivalente.
   La lista de Prospectos en filas y su barra de control viven en lista_prospectos.css; los filtros y el área de texto de
   los mensajes, que también usa Emails, en app.css. */

.prospecto {
  container-type: inline-size;
  --nivel-bg: var(--soft); --nivel-txt: var(--muted);
  display: flex; flex-direction: column; gap: 18px; padding: 24px; margin-bottom: 20px; scroll-margin-top: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.nv-alto { --nivel-bg: var(--em-bg); --nivel-txt: var(--em); }
.nv-medio { --nivel-bg: var(--am-bg); --nivel-txt: var(--am); }
.prospecto.foco { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring), var(--shadow-md); }

.p-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.p-id { min-width: 0; }
.p-nombre { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; overflow-wrap: anywhere; }
.p-sub { margin-top: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

/* Indicador de puntaje de la pantalla Hoy (vista_hoy.js: bloquePuntaje); la lista de Prospectos usa el suyo (fila_prospecto.js). */
.p-puntaje {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px;
  border-radius: 18px; background: var(--nivel-bg); color: var(--nivel-txt);
}
.pt-num { font-size: 22px; font-weight: 700; line-height: 1; }
.pt-niv { margin-top: 2px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; line-height: 1.1; }

.p-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-etiquetas:empty { display: none; }
/* Solo en Prospectos (fila y tarjeta) el estado sigue el rediseño: «Para contactar» (t-waiting) es neutro, «Mensaje enviado»
   (t-active) violeta y «Reunión» (t-note) celeste. En el resto del sitio (Emails) t-waiting sigue siendo ámbar. */
.p-estado .badge.t-waiting, .f-estado .badge.t-waiting, .d-estado .badge.t-waiting { background: var(--soft); color: var(--muted); }
.p-estado .badge.t-active, .f-estado .badge.t-active, .d-estado .badge.t-active { background: var(--vi-bg); color: var(--vi); }
.p-estado .badge.t-note, .f-estado .badge.t-note, .d-estado .badge.t-note { background: var(--sky-bg); color: var(--sky); }
.p-cabeza > .tag { flex: none; font-weight: 600; }          /* tipo de aviso (Oportunidades), a la derecha del título */

.p-cuerpo { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.p-cuerpo > .btn-group, .p-cuerpo > .p-acciones { margin-top: 0; }
.p-rotulo { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.p-hallazgo { padding: 14px 16px; border-radius: var(--r-md); background: var(--soft); }
.p-hallazgo .h-texto { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.hallazgos { list-style: none; }
.hallazgos li { padding: 10px 0 10px 16px; border-bottom: 1px solid var(--line); position: relative; }
.hallazgos li:last-child { border-bottom: none; }
.hallazgos li::before { content: ''; position: absolute; left: 0; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.hallazgos .h-texto { font-size: 14px; color: var(--muted); }
.h-dato { margin-top: 6px; font-size: 12px; color: var(--muted); }
.h-dato b { font-weight: inherit; }
.p-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
@container (max-width: 500px) { .p-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 340px) { .p-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-datos > div { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.p-datos dt { font-size: 11px; color: var(--muted); }
.p-datos dd { margin-top: 2px; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.p-mensaje { display: flex; flex-direction: column; gap: 8px; }
.p-mensaje .form-label { margin: 0; font-size: 12px; }
.p-mensaje .btn-group { margin-top: 0; }
.p-acciones .btn-group { margin-top: 0; }
.p-acciones .p-rotulo { margin-bottom: 8px; }
.p-grow { flex: 1 1 0; }                                     /* empuja «Descartar» a la derecha cuando entra en la fila */
.p-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.p-pie .calificar { flex: 1 1 auto; margin: 0; padding: 0; border: 0; }
.p-biblioteca { margin: 0; font-size: 13px; }
.p-biblioteca a { color: var(--brand-soft-ink); font-weight: 500; text-decoration: none; }
.p-biblioteca a:hover { text-decoration: underline; }
.p-motivo { font-size: 13px; }
.p-enviado { align-self: center; }
.p-dueno { font-size: 13px; margin: 0 0 8px; overflow-wrap: anywhere; }

.mail-auto { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 16px 6px; }
.mail-auto summary { min-height: 46px; display: flex; align-items: center; font-size: 14px; color: var(--muted); }
.mail-auto .form-label { margin-top: 10px; }
/* Qué decir si contesta y los seguimientos: textos fijos para copiar, con la misma caja que el mail automático. */
.p-seguimientos .p-bloque { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 6px; }
.p-seguimientos .p-bloque + .p-bloque { border-top: 1px solid var(--line); }
.p-seguimientos .p-bloque .form-label { margin: 0; }
.p-seguimientos .p-cuando { margin: 0; font-size: 12.5px; }
.p-seguimientos .btn-group { margin-top: 0; }
/* Gmail sin conectar: el aviso y su botón van arriba de los campos del mail. */
.mail-gmail { margin: 4px 0 12px; }
.mail-gmail .test-result { margin-top: 0; }
.mail-gmail .btn-group { margin-top: 10px; }
.mail-auto summary:has(.mail-pendiente) { flex-wrap: wrap; column-gap: 4px; }   /* en celular la marca baja de renglón en vez de ser otra columna */
.mail-auto .mail-pendiente { color: var(--ink); font-weight: 600; }
.descarte { padding: 16px; background: var(--soft); border-radius: var(--r-md); }
.descarte .form-input + .form-input { margin-top: 10px; }
.o-resumen { overflow-wrap: anywhere; }
.o-abiertas { font-size: 12px; margin: 0; }
.o-abiertas:empty { display: none; }
.o-borradores { display: flex; flex-direction: column; gap: 18px; }
.o-borradores:empty { display: none; }

/* Calificar un prospecto o un aviso: "Buena" / "Mala". */
.calificar-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-pregunta { font-size: 13px; color: var(--muted); margin-right: 4px; }
.calificar .filtro { height: 32px; padding: 0 14px; color: var(--ink); }
.calificar .filtro:hover { background: var(--soft); }
.calificar .filtro[aria-pressed='true'] { border-color: transparent; }
.calificar .filtro[data-buena='1'][aria-pressed='true'] { background: var(--em-bg); color: var(--em); }
.calificar .filtro[data-buena='0'][aria-pressed='true'] { background: var(--ro-bg); color: var(--ro); }
@media (pointer: coarse) { .calificar .filtro { height: 40px; } }
.calificar-motivos { flex-basis: 100%; margin-top: 12px; padding: 14px; background: var(--soft); border-radius: var(--r-md); }
.calificar-motivos .btn { display: flex; width: 100%; justify-content: flex-start; margin-top: 8px; text-align: left; border-radius: var(--r-md); white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }

/* ── Tablet y celular ────────────────────────────────────────── */

@media (max-width: 720px) {
  .prospecto { padding: 18px; border-radius: 18px; scroll-margin-top: 76px; }   /* la barra fija mide 60 px */
  .p-cuerpo .btn-group > .btn, .o-acciones > .btn { flex: 1 1 calc(50% - 8px); padding: 0 12px; }
  .p-cuerpo .o-acciones > .btn-primary { flex-basis: 100%; }
  .p-grow { display: none; }
  .p-biblioteca { width: 100%; }
  .calificar .filtro { height: 40px; }
}