/* Agendas: el selector «Personal · Trabajo · Todas» de Inicio, Calendario y Rachas, la etiqueta de cada tarea cuando se ven juntas y el cuadro para
   gestionarlas. Todo con el cristal de base.css. */

.agendas-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 14px 0;
}

.agendas-opcion,
.agendas-gestionar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.4rem;
    padding: 0 1rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--texto);
    cursor: pointer;
    background: var(--vidrio-superficie);
    -webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.6);
    backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.agendas-gestionar {
    margin-left: auto;
    font-weight: 500;
    opacity: 0.85;
}

.agendas-opcion[aria-pressed="true"] {
    color: var(--activo-texto);
    background: var(--activo-fondo);
    border-color: transparent;
}

.agendas-opcion:hover:not([aria-pressed="true"]),
.agendas-gestionar:hover {
    border-color: var(--activo-fondo);
}

.agendas-opcion:focus-visible,
.agendas-gestionar:focus-visible,
.agendas-color:focus-visible {
    outline: 2px solid var(--activo-fondo);
    outline-offset: 3px;
}

.agendas-punto {
    width: 0.7rem;
    height: 0.7rem;
    flex: none;
    background: var(--agenda);
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--texto) 30%, transparent);
}

/* La etiqueta de cada tarea cuando se ven las dos agendas juntas */
.chip-agenda {
    border-color: var(--agenda);
}

.chip-agenda::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.35rem;
    background: var(--agenda);
    border-radius: 50%;
}

/* El cuadro de gestión */
.agendas-dialogo {
    width: min(100% - 1.5rem, 32rem);
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 1.4rem 1.6rem;
    color: var(--texto);
    overflow-y: auto;
    background:
        var(--vidrio-superficie),
        color-mix(in srgb, var(--fondo) 55%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 var(--vidrio-luz), 0 40px 90px -30px rgba(0, 0, 0, 0.75);
}

.agendas-dialogo::backdrop {
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.agendas-dialogo[open] {
    display: grid;
    gap: 1rem;
}

.agendas-dialogo h2 {
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.agendas-cuerpo {
    display: grid;
    gap: 1rem;
}

.agendas-fila {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    border: 1px solid var(--vidrio-borde);
    border-radius: 16px;
    background-image: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
}

.agendas-fila h3 {
    font-size: 0.9rem;
}

.agendas-colores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.agendas-color {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    cursor: pointer;
    background: var(--color);
    border: 2px solid transparent;
    border-radius: 50%;
}

.agendas-color[aria-checked="true"] {
    border-color: var(--texto);
    box-shadow: 0 0 0 2px var(--fondo);
}

.agendas-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}