/* Calendario de fichajes */
.cal {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 16px;
    max-width: 760px;
}

.cal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cal-titulo {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-total {
    font-size: 12px;
    color: var(--color-muted);
}

.cal-rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-semana {
    text-align: center;
    font-size: 12px;
    color: var(--color-muted);
    margin-bottom: 4px;
}

.cal-vacio {
    min-height: 62px;
}

.cal-dia {
    min-height: 62px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

    .cal-dia:hover {
        border-color: var(--color-primary);
    }

.cal-finde {
    background-color: var(--color-bg);
}

.cal-hoy .cal-num {
    font-weight: 700;
    color: var(--color-primary);
}

.cal-sel {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.cal-num {
    font-size: 12px;
}

.cal-horas {
    font-size: 12px;
    font-weight: 600;
}

.cal-etiqueta {
    font-size: 10px;
}

.cal-ok {
    background-color: #E8F3EC;
    border-color: var(--color-success);
}

.cal-incompleto {
    background-color: #FBEAE8;
    border-color: var(--color-accent);
}

.cal-encurso {
    background-color: #FFF6DC;
    border-color: #C9A227;
}

.cal-ausencia {
    background-color: #E3F0FA;
    border-color: #1565C0;
}

.cal-festivo {
    background-color: #F9D9C8;
    border-color: #9C3D10;
}

.cal-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-muted);
}

.cal-punto {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid;
    vertical-align: middle;
}

@media (max-width: 560px) {
    .cal {
        padding: 10px;
    }

    .cal-dia, .cal-vacio {
        min-height: 52px;
        padding: 4px;
    }

    .cal-etiqueta {
        display: none;
    }
}

/* Botón grande de fichar */
.btn-fichar {
    width: 100%;
    max-width: 360px;
    padding: 22px 16px;
    font-size: 20px;
}

.fichar-botones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.qr-host {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px;
}

    .qr-host svg {
        display: block;
        width: 100%;
        height: auto;
    }

/* Pantalla del lector de la entrada */
.lector-resultado {
    max-width: 760px;
    min-height: 220px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}

.lector-ok {
    background-color: #E8F3EC;
    border-color: var(--color-success);
}

.lector-error {
    background-color: #FBEAE8;
    border-color: var(--color-accent);
}

.lector-grande {
    font-size: 40px;
    font-weight: 700;
}

.lector-nombre {
    font-size: 28px;
}

.lector-pequeno {
    font-size: 16px;
    color: var(--color-muted);
}

/* Asistencia a domicilio: la ruta del día en el móvil */
.ruta-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 560px;
}

.ruta-visita {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-border);
    border-radius: 6px;
    padding: 14px 16px;
}

    .ruta-visita.pendiente { border-left-color: var(--color-muted); }
    .ruta-visita.encurso { border-left-color: var(--color-primary); background-color: #F1F6FB; }
    .ruta-visita.hecha { border-left-color: var(--color-success); }
    .ruta-visita.cancelada { border-left-color: var(--color-accent); opacity: .75; }

.ruta-hora {
    font-size: 13px;
    color: var(--color-muted);
    margin-bottom: 2px;
}

.ruta-cliente {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 2px 0;
}

.ruta-detalle {
    font-size: 14px;
    color: var(--color-muted);
    margin: 0 0 10px 0;
}

.ruta-botones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .ruta-botones .btn {
        flex: 1 1 140px;
        padding: 16px 12px;
        font-size: 18px;
    }