/* ------------------------------------------------------------------
   Los hitos de un proyecto

   Una línea vertical con un punto por hito, el mismo punto de los estados
   de Tinta. El color dice de qué es; la fecha manda el orden.
   ------------------------------------------------------------------ */
.raver-hitos {
    list-style: none;
    margin: 18px 0 0;
    padding: 0 0 0 22px;
    border-left: 1px solid var(--tinta-borde);
}

.raver-hito {
    position: relative;
    padding: 0 0 22px 0;
}

.raver-hito:last-child {
    padding-bottom: 0;
}

.raver-hito::before {
    content: "";
    position: absolute;
    left: -27px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tinta-acento);
    box-shadow: 0 0 0 4px var(--tinta-sup);
}

.raver-hito-alojamiento::before { background: var(--tinta-acento-claro); }
.raver-hito-contenidos::before  { background: var(--tinta-alerta); }
.raver-hito-diseno::before      { background: #b07bff; }
.raver-hito-desarrollo::before  { background: var(--tinta-acento); }
.raver-hito-revision::before    { background: #ffc85c; }
.raver-hito-publicacion::before { background: var(--tinta-ok); }
.raver-hito-nota::before        { background: var(--tinta-apagado); }

/* Un hito interno se ve apagado: de un vistazo se sabe qué ve el cliente. */
.raver-hito-interno::before {
    background: transparent;
    border: 1px solid var(--tinta-apagado);
}

.raver-hito-interno .raver-hito-titulo {
    color: var(--tinta-suave);
}

.raver-hito-cabeza {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--raver-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.raver-hito-marca {
    color: var(--tinta-apagado);
    border: 1px solid var(--tinta-borde);
    border-radius: 3px;
    padding: 1px 6px;
}

.raver-hito-titulo {
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tinta-texto);
}

.raver-hito-texto {
    color: var(--tinta-texto-3);
    font-size: 13.5px;
    line-height: 1.6;
}

.raver-hito-texto p {
    margin: 8px 0 0;
}

.raver-hito-acciones {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* En el panel del cliente no hay botones: el hito respira más. */
.raver-hitos .raver-hito-texto:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   El calendario

   Grilla de siete columnas en pantalla ancha. En celular no hay grilla
   que valga: pasa a una agenda de un día por fila y los días sin nada
   desaparecen.
   ------------------------------------------------------------------ */
.raver-cal-barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.raver-cal-meses {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.raver-cal-mes {
    font-family: var(--raver-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta-texto);
    padding: 0 6px;
}

.raver-cal-capas {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.raver-cal-capa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--tinta-borde);
    border-radius: 3px;
    font-size: 11.5px;
    color: var(--tinta-apagado) !important;
    text-decoration: none !important;
    opacity: 0.55;
}

.raver-cal-capa-on {
    color: var(--tinta-texto) !important;
    opacity: 1;
}

.raver-cal-punto {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.raver-cal-grilla {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--tinta-borde);
    border: 1px solid var(--tinta-borde);
    border-radius: 6px;
    overflow: hidden;
}

.raver-cal-encabezado {
    background: var(--tinta-hundido);
    padding: 9px 10px;
    font-family: var(--raver-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.raver-cal-dia {
    background: var(--tinta-sup);
    min-height: 108px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.raver-cal-fuera {
    background: var(--tinta-campo);
}

.raver-cal-fuera .raver-cal-numero {
    opacity: 0.4;
}

/* Hoy: una línea arriba, sin pintar toda la celda. */
.raver-cal-hoy {
    box-shadow: inset 0 2px 0 0 var(--tinta-acento);
}

.raver-cal-numero {
    font-family: var(--raver-mono);
    font-size: 11px;
    color: var(--tinta-suave);
}

.raver-cal-solo-movil {
    display: none;
}

.raver-cal-evento,
.raver-cal-check {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 3px 4px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--tinta-texto) !important;
    font-size: 11.5px;
    line-height: 1.35;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}

.raver-cal-evento:hover,
.raver-cal-check:hover {
    background: rgb(var(--tinta-rejilla-rgb) / 0.06);
}

.raver-cal-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lo que ya pasó —cobrado, entregado, hecho— pierde peso pero no se va. */
.raver-cal-apagado .raver-cal-texto,
.raver-cal-apagado.raver-cal-evento .raver-cal-texto {
    color: var(--tinta-apagado);
    text-decoration: line-through;
}

.raver-cal-tarea {
    margin: 0;
    display: block;
}

.raver-cal-atrasadas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.raver-cal-linea {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--tinta-borde);
}

.raver-cal-fecha {
    font-family: var(--raver-mono);
    font-size: 11px;
    color: var(--tinta-alerta);
    min-width: 54px;
}

.raver-cal-titulo {
    flex: 1;
    color: var(--tinta-texto);
    font-size: 13.5px;
}

@media (max-width: 760px) {
    .raver-cal-grilla {
        grid-template-columns: 1fr;
    }

    .raver-cal-encabezado,
    .raver-cal-vacio {
        display: none;
    }

    .raver-cal-dia {
        min-height: 0;
    }

    .raver-cal-solo-movil {
        display: inline;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .raver-cal-solo-mes {
        display: none;
    }
}

/* El botón de una tarea es un evento más, no un botón del tema: sin fondo,
   sin borde y del ancho de la celda. El tema los pinta con su color de
   marca, así que acá hace falta pesar más. */
.raver-cal-dia .raver-cal-check {
    background: transparent !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    padding: 3px 4px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    color: var(--tinta-texto) !important;
    font-family: var(--raver-fuente) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.35 !important;
    overflow: hidden;
}

.raver-cal-dia .raver-cal-check:hover {
    background: rgb(var(--tinta-rejilla-rgb) / 0.06) !important;
}

.raver-cal-apagado .raver-cal-check {
    color: var(--tinta-apagado) !important;
}

.raver-cal-dia .raver-cal-check {
    display: flex !important;
    align-items: center;
    gap: 6px;
    justify-content: flex-start !important;
    text-align: left !important;
}

.raver-cal-dia .raver-cal-check .raver-cal-punto {
    display: block !important;
    flex: 0 0 7px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
}