/* «Para retomar» — las conversaciones de Matías con Claude y lo que quedó colgado en cada una.
   Sitio propio (retomar-gc.pages.dev). Va ENCIMA de base.css (copia del estilo de «Para leer»): acá sólo lo propio. */

/* Pestañas: seis; en el teléfono se deslizan */
.segmentado { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.segmentado::-webkit-scrollbar { display: none; }
.segmentado button { padding: 0 10px; }
@media (max-width: 767px) { .segmentado button { flex: 0 0 auto; padding: 0 12px; } }

/* Tarjetas: seis, como en «Para leer» (una fila en la compu, tres de a dos en el teléfono) */

/* Fila: el tema entra entero (dos renglones), se toca para ver el detalle */
.fila-link { cursor: pointer; }
.nombre { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fila.sin-resumen .nombre { font-weight: 500; color: var(--texto-2); }

/* Lo que quedó pendiente: siempre a la vista */
.pend, .det ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--secundario); line-height: var(--secundario-lh); }
.pend li, .det li { position: relative; padding-left: 14px; margin-top: 4px; color: var(--texto); }
.pend li::before, .det li::before {
  content: ""; position: absolute; left: 2px; top: .52em; width: 5px; height: 5px; border-radius: 50%; background: var(--naranja);
}
.det li::before, .pend li.ajeno::before { background: var(--gris); }
.pend li.ajeno { color: var(--texto-2); }
.fila.lista-ya .pend li::before { background: var(--gris); }
.mas { margin-top: 4px; font-size: var(--secundario); color: var(--acento); font-weight: 600; }

/* Detalle (se abre al tocar la fila): qué se hizo, decisiones, claves, cómo empezó */
.det { margin-top: 10px; padding-top: 2px; border-top: .5px solid var(--sep); }
.det h3 { margin: 10px 0 0; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.det p { margin: 4px 0 0; font-size: var(--secundario); line-height: var(--secundario-lh); color: var(--texto-2); overflow-wrap: anywhere; }
.det a { color: var(--acento); text-decoration: none; font-weight: 600; }
.det code, .cmd { font: 500 12px/16px ui-monospace, "SF Mono", Menlo, monospace; color: var(--texto-2); }

/* Etiquetas de tipo */
.badge.tipo { background: var(--relleno); color: var(--texto-2); }
.badge.tipo.idea { background: color-mix(in srgb, var(--amarillo) 26%, transparent); color: var(--amarillo-texto); }
.badge.tipo.sistema { background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--acento); }
.badge.tipo.marketing { background: color-mix(in srgb, var(--rojo) 12%, transparent); color: var(--rojo-texto); }
.badge.tipo.personal { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde-texto); }
.badge.curso { background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--acento); }
.badge.escrito { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde-texto); }

/* Botones: «Retomar» es el principal */
.seguir.fuerte { background: var(--acento); color: #fff; }
.seguir.fuerte:hover { background: var(--acento-hover); }
.seguir.suave { color: var(--texto); }

/* Encabezado de cada día: «Tildar el día» */
.grupo-t .der { display: inline-flex; align-items: baseline; gap: 10px; }
.tildar-dia { border: 0; background: transparent; padding: 0; color: var(--acento); font-size: var(--secundario); font-weight: 600; }
.tildar-dia:hover { text-decoration: underline; }
.badge.seguida { background: var(--relleno); color: var(--texto-2); }

/* Renglón de fechas: «Empezó … · Último mensaje …» — en negrita la fecha por la que se ordena */
.tiempos span:not(.sep) { color: var(--texto); }

.badge.escrito { text-decoration: none; }