/* Cosmos Pareja: estilos de la Agenda (despues de estilos.css y finanzas.css).
   Colores de quien: tu (rosa) y tu pareja (violeta), los mismos validados para
   la grafica de Finanzas; "juntos" lleva los dos. Nunca solo color: cada plan
   dice tambien en texto de quien es (Tú / nombre / Juntos). */
:root { --tu: #d9466f; --suyo: #7b5ea7; }
@media (prefers-color-scheme: dark) { :root { --tu: #e0587d; --suyo: #9478c8; } }

.titulo-pantalla { font-size: 1.15rem; }
.globo { position: absolute; margin-left: 30px; margin-top: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rosa); color: #fff; font-size: 0.7rem; font-style: normal; font-weight: 700; line-height: 18px; }
.barra button { position: relative; }

/* Calendario del mes */
.cal { padding: 14px 12px; }
.cal-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-cabeza .flecha { border: 0; background: none; font-size: 1.6rem; color: var(--rosa); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.cal-semana, .cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-semana span { font-size: 0.75rem; color: var(--suave); font-weight: 600; padding: 4px 0; }
.dia-cal { position: relative; border: 0; background: none; color: var(--texto); font: inherit; aspect-ratio: 1 / 1.05; min-height: 42px; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; touch-action: manipulation; }
.dia-cal .num { font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.dia-cal.fuera { color: var(--suave); opacity: 0.5; }
.dia-cal.hoy .num { background: var(--rosa); color: #fff; border-radius: 999px; min-width: 26px; height: 26px; line-height: 26px; font-weight: 700; margin-top: -3px; }
.dia-cal.sel { background: var(--rosa-claro); box-shadow: inset 0 0 0 1.5px var(--rosa); }
@media (hover: hover) { .dia-cal:hover { background: var(--rosa-claro); } }
.dia-cal .fe { position: absolute; top: 1px; right: 3px; font-size: 0.65rem; }
.puntos { display: flex; gap: 3px; margin-top: 4px; height: 7px; }
.punto-cal { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.punto-cal.mio { background: var(--tu); }
.punto-cal.suyo { background: var(--suyo); }
.punto-cal.juntos { background: linear-gradient(90deg, var(--tu) 50%, var(--suyo) 50%); }
.leyenda-cal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.82rem; color: var(--suave); margin: 10px 4px 0; }
.leyenda-cal span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda-cal .enlace { margin-left: auto; padding: 0; }

.dia-titulo { font-size: 1.05rem; margin: 6px 4px 10px; }
.fecha-especial { background: var(--rosa-claro); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.fecha-especial .enlace { padding: 0 0 0 6px; font-size: 0.85rem; }

/* Lista de planes del dia */
.lista-eventos { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.evento { display: flex; gap: 12px; align-items: flex-start; background: var(--tarjeta); border: 1px solid var(--linea); border-left: 5px solid var(--tu); border-radius: 14px; padding: 12px; cursor: pointer; }
.evento.suyo { border-left-color: var(--suyo); }
/* Juntos: franja de los dos colores (rosa por fuera, violeta por dentro) */
.evento.juntos { border-left-color: var(--tu); box-shadow: inset 4px 0 0 var(--suyo); padding-left: 16px; }
.evento.tentativo { border-style: dashed; }
.evento:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.evento .hora { flex: none; width: 74px; font-size: 0.82rem; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; padding-top: 2px; }
.evento .txt b { white-space: normal; }

.estado { display: inline-block; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; margin-top: 6px; }
.estado.ok { background: var(--verde-claro); color: var(--verde); }
.estado.turno { background: var(--rosa); color: #fff; }
.estado.espera { background: var(--amarillo-claro); color: var(--texto); }

/* Planes en pareja */
.plan h3 { margin: 0; font-size: 1.05rem; }
.plan .encabezado { align-items: flex-start; }
.plan .estado { margin-top: 0; white-space: nowrap; }
.cuando { font-weight: 600; margin: 8px 0 6px; }
.cambio { background: var(--rosa-claro); border-radius: 10px; padding: 10px 12px; font-size: 0.92rem; }
.acciones .boton { flex: 1; }
.ver-mas { display: block; font-size: 0.85rem; }
.citas-mini { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 16px; }
.cerrados summary { margin: 16px 0 8px; }
.cerrados .tarjeta { opacity: 0.75; }

/* Fechas especiales */
.fecha h3 { margin: 0; font-size: 1.05rem; }
.fecha.cerca { border-color: var(--rosa); }
.cuenta { margin: 8px 0 0; }
.ideas { list-style: none; margin: 0; padding: 0; }
.ideas li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 0.92rem; }
.ideas li:last-child { border-bottom: 0; }
.ideas small { color: var(--suave); white-space: nowrap; font-weight: 600; }

.gustos { background: var(--rosa-claro); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; margin: 10px 0 0; }
.fila-ideas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.boton-ia { border: 1.5px dashed var(--suyo); background: none; color: var(--suyo); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.boton-ia .etiqueta { margin: 0 0 0 4px; }
.cal-google { display: block; margin: 10px auto 0; font-size: 0.88rem; }
.pasos-cal { padding-left: 20px; }
.pasos-cal li { margin: 10px 0; }
.enlace-cal { display: flex; gap: 8px; margin-top: 6px; }
.enlace-cal input { font-size: 0.8rem; padding: 8px 10px; min-width: 0; }

/* Ficha de un plan */
.hoja-contenido { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; max-height: 92dvh; }
.historial { margin: 14px 0; padding-left: 20px; font-size: 0.9rem; }
.historial li { margin: 6px 0; }
.historial small { color: var(--suave); }
.botones-ficha { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.botones-ficha .boton { margin-top: 6px; }
.peligro-txt { color: var(--rojo); }
textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--texto); resize: vertical; }
textarea:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa-claro); }
input[type="time"] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; min-height: 48px; }